思路：vue中图片合并
首先准备好要合并的背景图，和请求后得到的二维码，
canvas画图，将两张背景图和一张二维码用canvas画出来，
将canvas再转为img
注意canvas和图片的清晰图和图片的尺寸位置
开始时canvas是隐藏的，两张背景图时显示的，当canvas画完后再转为img的时候，隐藏canvas和背景图，显示canvas转完的图片（也就是合并后的图片）
这个适配方式可能有些瑕疵，所以会加了很多设备的判断
代码：
html
<div class="wap-poster" ref="imageWrapper" id="target" style="width: 100%;">
<canvas id="mycanvas" width="100%" height="100%" v-if="!infactQrCode" style="transform: scale(2);display: none"></canvas>
<img v-if="!infactQrCode" src="../../../assets/imgs/posterbg.jpg" id="bgImg" alt="" style="width: 100%;height:100%;">
<img v-if="!infactQrCode" src="../../../assets/imgs/poster0.png" id="poster" alt="" style="position: absolute;">
<img v-if="!infactQrCode" id="qrcode" :src="qrCodeImg" alt="" style="position: absolute;top:247px;width: 140px;height: 140px;display: none">
<img :src="infactQrCode" alt="" v-if="infactQrCode" style="width: 100%;height:100%">
</div>
js<script>
import html2canvas from 'html2canvas'
export default {
name: 'Poster',
data() {
return {
qrCodeImg: "",
infactQrCode:"",
}
},
created(){
//二维码图片后台返回
this.qrCodeImg="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568183940&di=49b7187fdb7fee3e30c20583150f09b6&imgtype=jpg&er=1&src=http%3A%2F%2Fdown.admin5.com%2Fuploads%2Fallimg%2F170630%2F2160_170630144656_1.jpg";
},
methods: {
drawImg(){
let _self=this;
var canvas = document.getElementById("mycanvas");
var a = setInterval(() =>{
// 重复获取
canvas = document.getElementById("mycanvas");
if(!canvas){
return false
} else {
clearInterval(a);
var context = canvas.getContext('2d');
context.scale(,) //图片清晰度解决办法，缩放2倍后，其他图片的宽高也要比ui设计的宽高乘以2
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
let bgUrl=document.getElementById("bgImg").src;
img.src=bgUrl;
img.onload = function(){
if(img.complete){
//画第一张背景图，图片的宽高撑满整个屏幕
context.drawImage(img,,,window.screeWidth,window.screeHeight);
var img1 = new Image();
let bgUrl1=document.getElementById("poster");
img1.src=bgUrl1.src;
img1.setAttribute('crossOrigin', 'anonymous');
img1.onload = function(){
//img1为第2张背景图，开始画第2张图，图片的的定位，left为整个屏幕-ui设计图片的宽*图片的适配比例，最后除以2保证图片居中，
//图片的left top width height都是这样计算的，
if(img1.complete){
var left = (window.screeWidth-*window.rateWidth)/;
if(window.screeHeight>=&&window.screeWidth<){ //iphonx的计算方式
context.drawImage(img1,left,*window.rateWidth,*window.rateWidth,*window.rateHeight);
}else{
context.drawImage(img1,left,*window.rateWidth,*window.rateWidth,*window.rateHeight);
} var img2 = new Image();
img2.src=document.getElementById("qrcode").src;
img2.crossOrigin="*";
img2.onload = function(){
if(img2.complete){
//二维码图片的画图left top widht height
var left = (window.screeWidth-*window.rateWidth)/;
if(window.screeWidth==&&window.screeHeight==){ //ipad
var left = (window.screeWidth-*window.rateWidth)/;
context.drawImage(img2,left,*window.rateHeight,*window.rateWidth,*window.rateWidth);
var image = new Image();
_self.infactQrCode=canvas.toDataURL("image/png");
return
}
if(window.screeWidth>=&&window.screeHeight>){ //其他设备
var left = (window.screeWidth-*window.rateWidth)/;
context.drawImage(img2,left,*window.rateHeight,*window.rateWidth,*window.rateWidth);
}else if (window.screeHeight>=&&window.screeWidth<){
context.drawImage(img2,left,*window.rateHeight,*window.rateWidth,*window.rateWidth);
}else{
context.drawImage(img2,left,*window.rateHeight,*window.rateWidth,*window.rateWidth);
} //以上为2张背景图和一张二维码画合并后图画到canvas的结果，下面为将canvas转为图片的方法
var image = new Image();
_self.infactQrCode=canvas.toDataURL("image/png");
}
}
}
}
}
}
}
},)
},
},
mounted(){
this.drawImg(); //主要代码再该方法，将图片转为canvas，再将canvas转为图片，因为canvas是无法长按保存和识别二维码的
const that = this;
window.screeWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
window.screeHeight= window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var left = (window.screeWidth-)/;
var qrcode=document.getElementById("qrcode");
qrcode.style.left=left+'px';
this.screeWidth=window.screeWidth;
var canvas = document.getElementById("mycanvas");
//适配
window.rateWidth = window.screeWidth/ ;
window.rateHeight = window.screeHeight/;
//清晰度解决办法
canvas.setAttribute("width",window.screeWidth*);
canvas.setAttribute("height",window.screeHeight*); let bgUrl1=document.getElementById("poster");
var left = (window.screeWidth-*window.rateWidth)/;
if(window.screeHeight>=&&window.screeWidth<){
bgUrl1.style.left=left+"px";
bgUrl1.style.top=*window.rateWidth+"px";
bgUrl1.style.width=*window.rateWidth+"px";
bgUrl1.style.height=*window.rateHeight+"px";
}else{
bgUrl1.style.left=left+"px";
bgUrl1.style.top=*window.rateWidth+"px";
bgUrl1.style.width=*window.rateWidth+"px";
bgUrl1.style.height=*window.rateHeight+"px";
} },
}
</script>