以前写的,不知道还能不能用,两种方法,仅限H5,当时用原生的方法生成的速度会快一些,现在不知道怎么样了。保存的话公众号上面的图片长按可以保存到相册
// 原生canvas方法生成图片
let c = document.createElement("canvas");
c.id = 'myCanvas';
let ctx = c.getContext("2d");
c.width = 614*this.width/750*2;
c.height = 912*this.width/750*2;
ctx.fillStyle = '#fff';
ctx.rect(0, 0, c.width*2, c.height*2);
ctx.fillRect(0, 0, c.width*2, c.height*2);
let img = new Image();
img.src = this.imgSrc;
img.crossOrigin = "Anonymous";//图片允许跨域
img.onload = ()=> {
ctx.drawImage(img, 0, 0, 614*this.width/750*2, 740*this.width/750*2);
ctx.fillStyle = "#000";
ctx.font = `bold ${30*this.width/750*2}px PingFang SC Light`;
ctx.fillText(`我是${this.custInfo.custName}`,30*this.width/750*2, 795*this.width/750*2);
ctx.font = `bold ${24*this.width/750*2}px PingFang SC Light`;
ctx.fillText("我是SVIP会员,给你申请一张",35*this.width/750*2, 840*this.width/750*2);
ctx.font = `bold ${26*this.width/750*2}px PingFang SC Light`;
ctx.fillText("「岛亲礼卡」",30*this.width/750*2, 875*this.width/750*2);
ctx.font = `bold ${24*this.width/750*2}px PingFang SC Light`;
ctx.fillText("试用,扫我的码领取",180*this.width/750*2, 875*this.width/750*2);
let img2 = new Image();
img2.src = this.qrSrc;//二维码
img2.onload = ()=> {
ctx.drawImage(img2, 460*this.width/750*2, 770*this.width/750*2, 110*this.width/750*2, 110*this.width/750*2);
let img = c.toDataURL("image/jpeg", 0.5);
this.imgList.push(img);//把生成的图片放入数组中
};
};
// uni方法
// const ctx = uni.createCanvasContext('myCanvas', this);
// ctx.beginPath();
// ctx.drawImage( this.imgSrc, 0, 0, 614*this.width/750, 740*this.width/750 );
// ctx.setFontSize(30*this.width/750);
// ctx.setFillStyle('#000');
// ctx.fillText(`我是${this.custInfo.custName}`, 30*this.width/750, 795*this.width/750)
// ctx.setFontSize(24*this.width/750);
// ctx.fillText('我是SVIP会员,给你申请一张', 30*this.width/750, 840*this.width/750)
// ctx.setFontSize(26*this.width/750);
// ctx.fillText('「岛亲礼卡」', 30*this.width/750, 875*this.width/750)
// ctx.setFontSize(24*this.width/750);
// ctx.fillText('试用,扫我的码领取', 180*this.width/750, 875*this.width/750)
// ctx.drawImage( this.qrSrc, 460*this.width/750, 770*this.width/750, 110*this.width/750, 110*this.width/750 );
// ctx.draw(true,()=>{
// uni.canvasToTempFilePath({
// canvasId: 'myCanvas',
// fileType: 'jpg',
// quality: 0.5,
// success:res=>{
// console.log(res);
// this.imgList.push(res.tempFilePath);//把生成的图片放入数组中
// }
// })
// });
3 个回复
1***@qq.com
;老哥 你的公众号 canvas遇到 图片的跨域问题了吗 怎么解决啊
q***@163.com - 喜欢枫叶
请问楼主有解决办法嘛?
口区 - 惹
以前写的,不知道还能不能用,两种方法,仅限H5,当时用原生的方法生成的速度会快一些,现在不知道怎么样了。保存的话公众号上面的图片长按可以保存到相册