1、HTML部分
<view class="poster" id="canvas"> <img id="avatar" /> </view>
2、js部分
`import { qrcanvas } from "qrcanvas" const drawAndShareImage = () => { let url = 'XXX.com' nextTick(() => { let qrc = qrcanvas({ data: url, size: 400, }); //生成二维码 let imgsrc = qrc.toDataURL("image/png") state.qrcodeImg = imgsrc
var canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 990;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "transparent";
context.fill();
var myImage = new Image();
myImage.crossOrigin = 'Anonymous';
myImage.src = '../../static/img/poster.png' //背景图片 本地,线上的都可以,线上的注意放开跨域
const scale = window.devicePixelRatio; //定义任意放大倍数 支持小数
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let imgW = 640 * scale
let imgH = 990 * scale
let img2X = 240 * scale
let img2Y = 750 * scale
let imgWH = 500 * scale
//实践让我ios和安卓要区分尺寸
if (isiOS) {
imgW = 640
imgH = 990
img2X = 220
img2Y = 720
imgWH = 180
}
myImage.onload = function() {
context.drawImage(myImage, 0, 0, imgW, imgH);
/* context.font = "60px Courier New";
context.fillText("我是文字", 350, 450); */
var myImage2 = new Image();
myImage2.src = state.qrcodeImg;
myImage2.crossOrigin = 'Anonymous';
myImage2.onload = function() {
context.drawImage(myImage2, img2X, img2Y, imgWH, imgWH);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
var img = document.getElementById('avatar');
img.setAttribute('src', base64);
}
}
});
}`