vue中canvas生成图片并上传服务器

最新推荐文章于 2024-03-22 14:35:00 发布

原创最新推荐文章于 2024-03-22 14:35:00 发布 · 3.3k 阅读

13 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何将canvas内容转换为图片并上传到服务器的两种策略：一是直接将canvas转为base64字符串上传，二是先转为base64再转化为file类型上传。提供了一套完整的代码实现，包括canvas转base64、base64转file以及使用formData进行上传的Vue示例。

将canvas转化为图片并上传服务器，有两种思路
思路1 直接将canvas转化为base64编码，将base64编码的字符串上传服务器，让后端转化为图片；
思路2 需要将canvas的内容先转化为base64编码的字符串，再将字符串转化为file上传；

1 将canvas转化为file

canvas转化为64
canvasToBase64: function(canvas){
// 'image/png'可以换成'image/jpeg'
return canvas.toDataURL('image/png');
}

canvas转化为图片
canvasToImg: function(canvas){
let image = new Image();
image.src = canvas.toDataURL('image/png')
return image;
}

base64转化为file
base64ToFile: function(urlData, fileName){
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]);
let n = bytes.length
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, { type: mime });
}

2 vue上传canvas

使用formData上传canvas
submitImg: function(canvas){
let param= new FormData();
param.append("file", this.base64ToFile(canvas.toDataURL('image/png'));
param.append("user_name", 'mason');

// 注意添加headers
axios.post('/que/admin/final/report/chess/image/add/', param, {headers:{'Content-Type': 'multipart/form-data'}}).then(res=>{
console.log(res.data);
});
}