<div>
// html中添加canvas标签加上id
<canvas id="canvas" width="126" height="126"></canvas>
</div>
// 事件名
createdCanvas(){
let that = this;
// 通过id获取canvas标签
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 新增图片
let image = new Image()
//图片的url
image.src = url;
// 图片加载完回调
image.onload = function() {
// 设置背景图,不要背景图就不设置
ctx.drawImage(this, 0, 0, 126, 126)
//fillStyle 设置字体颜色
ctx.fillStyle = '#ffffff';
// textAlign 设置文字居中
ctx.textAlign = "center"
//font 设置文字大小
ctx.font = "16px Calibri";
//fillText 将文字绘制到画布中,'文字','x轴位置',y轴位置
ctx.fillText('文字', 63, 60);
//设置多一张图片在背景图上面显示
let image2 = new Image()
image2 .src = url;
image2 .onload = function () {
//将图片绘制到画布上
ctx.drawImage(image2 , 0, 0, 126, 126)
// 通过toDataURL保存图片,格式是base64格式的。
let imageUrl = canvas.toDataURL('image/png');
// 调用新增转换方法base64toFile
// 转换后调用后端接口上传FormData文件流
that.compositeEditImg(that.base64toFile(imageUrl,'file'));
}
}
},
//上传图片
compositeEditImg(url, arr){
let formData = new FormData();
// url是base64转换了的文件流
formData.append("file", url);
axios.post("/file/upload", formData).then(res =>{
console.log(res)
})
},
//新增base64图片转换
base64toFile(data, fileName) {
const dataArr = data.split(",");
const byteString = atob(dataArr[1]);
const options = {
type: "image/jpeg",
endings: "native"
};
const u8Arr = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
u8Arr[i] = byteString.charCodeAt(i);
}
return new File([u8Arr], fileName + ".jpg", options);//返回文件流
},