js多张图⽚合成⼀张图，canvas（海报图，将⼆维码和背景图合
并）-----vue
思路：vue中图⽚合并
⾸先准备好要合并的背景图，和请求后得到的⼆维码，
canvas画图，将两张背景图和⼀张⼆维码⽤canvas画出来，
将canvas再转为img
注意canvas和图⽚的清晰图和图⽚的尺⼨位置
开始时canvas是隐藏的，两张背景图时显⽰的，当canvas画完后再转为img的时候，隐藏canvas和背景图，显⽰canvas转完的图⽚（也就是合并后的图⽚）
这个适配⽅式可能有些瑕疵，所以会加了很多设备的判断
代码：
html
<div class="wap-poster"ref="imageWrapper" id="target" >
<canvas id="mycanvas" width="100%" height="100%" v-if="!infactQrCode" ></canvas>
<img v-if="!infactQrCode" src="../../../assets/imgs/posterbg.jpg" id="bgImg" alt="" >
<img v-if="!infactQrCode" src="../../../assets/imgs/poster0.png" id="poster" alt="" >
<img v-if="!infactQrCode" id="qrcode" :src="qrCodeImg" alt="" >
<img :src="infactQrCode" alt="" v-if="infactQrCode" >
</div>
js<script>
import html2canvas from'html2canvas'
export default {
name: 'Poster',
data() {
return {
qrCodeImg: "",
infactQrCode:"",
}
},
created(){
//⼆维码图⽚后台返回
this.qrCodeImg="";
},
methods: {
drawImg(){
let _self=this;
var canvas = ElementById("mycanvas");
var a = setInterval(() =>{
// 重复获取
canvas = ElementById("mycanvas");
if(!canvas){
return false
} else {
clearInterval(a);
var context = Context('2d');
context.scale(2,2) //图⽚清晰度解决办法，缩放2倍后，其他图⽚的宽⾼也要⽐ui设计的宽⾼乘以2
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
let ElementById("bgImg").src;
img.src=bgUrl;
if(imgplete){
//画第⼀张背景图，图⽚的宽⾼撑满整个屏幕
context.drawImage(img,0,0,window.screeWidth,window.screeHeight);
var img1 = new Image();
let ElementById("poster");
img1.src=bgUrl1.src;
img1.setAttribute('crossOrigin', 'anonymous');
//img1为第2张背景图，开始画第2张图，图⽚的的定位，left为整个屏幕-ui设计图⽚的宽*图⽚的适配⽐例，最后除以2保证图⽚居中， //图⽚的left top width height都是这样计算的，
if(img1plete){
var left = (window.screeWidth-600*window.rateWidth)/2;
if(window.screeHeight>=812&&window.screeWidth<768){ //iphonx的计算⽅式
context.drawImage(img1,left,200*window.rateWidth,600*window.rateWidth,890*window.rateHeight);
}else{
context.drawImage(img1,left,110*window.rateWidth,600*window.rateWidth,1100*window.rateHeight);
}
var img2 = new Image();
img2.ElementById("qrcode").src;
if(img2plete){
//⼆维码图⽚的画图left top widht height
var left = (window.screeWidth-290*window.rateWidth)/2;
if(window.screeWidth==600&&window.screeHeight==1024){ //ipad
var left = (window.screeWidth-240*window.rateWidth)/2;
context.drawImage(img2,left,460*window.rateHeight,240*window.rateWidth,240*window.rateWidth);
var image = new Image();
_self.DataURL("image/png");
return
}
if(window.screeWidth>=768&&window.screeHeight>812){ //其他设备
var left = (window.screeWidth-230*window.rateWidth)/2;
context.drawImage(img2,left,430*window.rateHeight,230*window.rateWidth,230*window.rateWidth);
}else if (window.screeHeight>=812&&window.screeWidth<768){
context.drawImage(img2,left,410*window.rateHeight,290*window.rateWidth,290*window.rateWidth);
}else{
context.drawImage(img2,left,410*window.rateHeight,290*window.rateWidth,290*window.rateWidth);
}
//以上为2张背景图和⼀张⼆维码画合并后图画到canvas的结果，下⾯为将canvas转为图⽚的⽅法
var image = new Image();
svg和canvas的区别_self.DataURL("image/png");
}
}
}
}
}
}
}
},1)
},
},
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-140)/2;
var ElementById("qrcode");
qrcode.style.left=left+'px';
this.screeWidth=window.screeWidth;
var canvas = ElementById("mycanvas");
//适配
window.rateWidth = window.screeWidth/ 750;
window.rateHeight = window.screeHeight/1334;
//清晰度解决办法
canvas.setAttribute("width",window.screeWidth*2);
canvas.setAttribute("height",window.screeHeight*2);
let ElementById("poster");
var left = (window.screeWidth-600*window.rateWidth)/2;
if(window.screeHeight>=812&&window.screeWidth<768){
bgUrl1.style.left=left+"px";
p=200*window.rateWidth+"px";
bgUrl1.style.width=600*window.rateWidth+"px";
bgUrl1.style.height=890*window.rateHeight+"px";
}else{
bgUrl1.style.left=left+"px";
p=110*window.rateWidth+"px";
bgUrl1.style.width=600*window.rateWidth+"px";
bgUrl1.style.height=1100*window.rateHeight+"px";
}
},
}
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论