#前言
我遇到的问题是这样的，自己用canvas画图，然后需要将画出来的图转成url格式传给后端。中间也遇到了很多问题，也卡了我一段时间。 一般来说canvas画图canvas.toDataURL('image/png')转出来都是base64格式的，我是通过将base64格式转成了file文件，然后通过'/upload'接口，将fille文件转成了url的格式。代码如下
#上代码
function () {
var canvas = document.getElementById('canvas'); // 页面上要有这个canvas标签，获取这个元素
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d')
ctx.fillRect (10, 10, 55, 50); // 绘制一个矩形
var tempSrc = canvas.toDataURL("image/jpeg"); // 将canvas转成base64
// 图片文件 名称
const files = this.dataURLtoFile(tempSrc, 'newImg')
// 这一步是非常重要的
const param = new FormData(); // 创建form对象
param.append('file', files);
// 上传fil文件获取图片的url
const urlData = await getImgUrl(param)
console.log(urlData)
}();
function dataURLtoFile (dataurl, filename) {
var arr = dataurl.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
},
function getImgUrl (params) {
return axios({
url: 'http://xxxx/upload', // xxxx服务器地址
method: 'post',
data: params
})
}
#推荐阅读
推荐一位使用canvas画图的博文，真的写的特别好。如果有需要的话可以去看看。
