33 lines
1.3 KiB
JavaScript
33 lines
1.3 KiB
JavaScript
import waterMark from '@/assets/image/waterMark.png'
|
||
function drawAndShareImage(imgUrl){
|
||
return new Promise((resolve,reject) => {
|
||
var canvas = document.createElement("canvas");
|
||
canvas.width = 1280;
|
||
canvas.height = 720;
|
||
var context = canvas.getContext("2d");
|
||
|
||
// context.rect(0 , 0 , canvas.width , canvas.height);
|
||
// context.fillStyle = "#fff";
|
||
// context.fill();
|
||
|
||
var myImage = new Image();
|
||
myImage.crossOrigin = 'Anonymous'; //允许跨域
|
||
myImage.src = imgUrl; //背景图片
|
||
myImage.onload = function(){
|
||
context.drawImage(myImage , 0 , 0 , 1280 , 720);
|
||
// context.font = "60px Courier New";
|
||
// context.fillText("我是文字",350,450);
|
||
var waterMarkImg = new Image();
|
||
waterMarkImg.crossOrigin = 'Anonymous';
|
||
waterMarkImg.src = waterMark; //水印图
|
||
|
||
waterMarkImg.onload = function(){ //第二次绘制，绘制logo即可
|
||
context.drawImage(waterMarkImg , 0 , 0 , 499 , 210);
|
||
var base64 = canvas.toDataURL("image/jpg"); //"image/png" 这里注意一下
|
||
resolve(base64)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
export default drawAndShareImage |