功能需求:海报有1张背景图, 海报上的文案内容动态变化在背景图的某个位置上添加二维码图片水印功能大致思路html页面部分, 包括背景图,接口得来的数据,以及二维码图片的位置使用 qrcodejs2库生成二维码图片,展现到预定位置添加水印（canvas | html 两种方式 后边会分别进行介绍）使用 html2canvas库 将页面整体转换成一张海报关键代码1. html 图片部分 （以uni-app举例）代码语言：javascript代码运行次数：0运行复制
注：
1. 需要为该div添加一个id 如 'posterArea', 供html2canvas需要使用2. qrcodejs生成二维码（如果二维码是固定的即可跳过这一步）代码语言：javascript代码运行次数：0运行复制import QRCode from 'qrcodejs2'
createQrcode(text) {
// 生成二维码
const qrcodeImgEl = document.getElementById('qrcodeImg')
qrcodeImgEl.innerHTML = ''
let qrcode = new QRCode(qrcodeImgEl, {
width: 200,
height: 200,
colorDark: '#000000', // 前景色
colorLight: '#ffffff', // 背景色
correctLevel: QRCode.CorrectLevel.H // 容错级别
})
qrcode.makeCode(text) // 设置二维码内容
},
关于容错级别:
QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正）
QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正）
QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正）3. 添加水印（二选一即可）使用html方式生成 ，然后作为组件导入到页面中即可（个人推荐此方式，速度上比canvas快一些）代码语言：javascript代码运行次数：0运行复制
{{sytext}}
使用canvas生成代码语言：javascript代码运行次数：0运行复制const canvas = document.createElement("canvas");
let _ix = img.width; // 图片宽高
let _iy = img.height;
canvas.width = _ix;
canvas.height = _iy;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(51,51,51,0.4)";
ctx.font = '50px "微软雅黑"'; //设置字体
ctx.drawImage(img, 0, 0);
for (let j = 50; j <= img.height * 2;) {
ctx.fillText(remartText, img.width/2, j);
j += 260 // 水印的稀疏可随意调节
}4. 生成分享海报代码语言：javascript代码运行次数：0运行复制 createPoster(domId, obj) {
let dom = document.querySelector(domId);
let res = {
height: dom.scrollHeight,
width: dom.scrollWidth
}
console.log('终版', res)
let canvas = await html2canvas(dom, {
useCORS: true, // 支持图片跨域
// scale: 4, //按比例增加分辨率 (2=双倍).
// dpi: window.devicePixelRatio * 4,//设备像素比
// 页面有滚动条时 设置，若不加导出图片为当前可视区域
windowHeight: dom.scrollHeight,
windowWidth: dom.scrollWidth,
backgroundColor: null,
width: dom.scrollWidth,
height: dom.scrollHeight
})
let imgRes = canvas.toDataURL(); // 默认 png格式
// let imgRes = canvas.toDataURL("image/jpeg", 0.8) 图片质量和后缀可以调节 质量范围: 0-1
console.log('图片的base64地址', imgRes)
}拿到海报的base64地址以后，我们就可以进行后续的业务操作了。
常见问题处理1. 背景图片为透明时，生成海报变为黑色解决办法：canvas填充白色
代码语言：javascript代码运行次数：0运行复制// 解决透明背景变为黑色问题
context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, image.width, image.height);2. 海报模糊解决办法： 如果使用的是uni-app中的image标签 需要替换为 img标签，image标签在uni-app中其实是背景图片
3. 海报生成不全解决办法： 有可能是图片等没有渲染完成，可利用图片的加载完成事件 @load ，等加载完成后再进行后续操作
代码语言：javascript代码运行次数：0运行复制4. 图片显示跨域错误解决办法：开启 html2canvas的跨域 ，如果还不行大概率是后端返回的图片跨域问题
代码语言：javascript代码运行次数：0运行复制let canvas = await html2canvas(dom, {
useCORS: true, // 支持图片跨域
})