const drawAndShareImage = (imgA,imgB,dom)=>{//封装生成海报方法~
return new Promise((resolve,reject)=>{
var canvas = document.createElement("canvas");
canvas.width = 1304;
canvas.height = 2316;
var context = canvas.getContext("2d");
context.rect(0 , 0 , canvas.width , canvas.height);
context.fillStyle = "#fff";
context.fill();
var imageA = new Image();
imageA.crossOrigin = 'Anonymous';
imageA.src = imgA;
imageA.onload = function(){
context.drawImage(imageA , 0 , 0 , 1306 , 2316);
var imageB = new Image();
imageB.crossOrigin = 'Anonymous';
imageB.src = imgB;
imageB.onload = function(){
context.drawImage(imageB , 10 , 2060 , 240 , 240);
//var base64 = canvas.toDataURL("image/png");
var base64 = canvas.toDataURL("image/jpeg");
var img = document.getElementById(dom);
// console.log('Hello');
img.setAttribute('src' , base64);
console.log("加载完了~");
if (dom!=null) {
resolve(true);
}else {
reject(false);
}
}
}
});
}
export { drawAndShareImage }
main.js引入
import {drawAndShareImage } from '@/utils/canvascode';//生成海报方法
Vue.prototype.$Canvas = drawAndShareImage;//放在原型里面~
调用
this.$Canvas(this.shareBannerSRC,this.codeSRC,"shareBoximg").then(val=>{
console.log("val",val);
this.shareBox = true;
this.shareWait = false;
Toast.clear();
});