码迷,mamicode.com
首页 > Web开发 > 详细

js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

时间:2019-09-04 15:02:22      阅读:1084      评论:0      收藏:0      [点我收藏+]

标签:for   int   ui设计   att   data   draw   pre   port   target   

思路: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,2) //图片清晰度解决办法,缩放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,
0,0,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-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.src=document.getElementById("qrcode").src; img2.crossOrigin="*"; img2.onload = function(){ if(img2.complete){
              //二维码图片的画图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.infactQrCode=canvas.toDataURL("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(); _self.infactQrCode=canvas.toDataURL("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 qrcode=document.getElementById("qrcode"); qrcode.style.left=left+px; this.screeWidth=window.screeWidth; var canvas = document.getElementById("mycanvas");
//适配 window.rateWidth
= window.screeWidth/ 750; window.rateHeight = window.screeHeight/1334;
//清晰度解决办法 canvas.setAttribute(
"width",window.screeWidth*2); canvas.setAttribute("height",window.screeHeight*2);



let bgUrl1
=document.getElementById("poster"); var left = (window.screeWidth-600*window.rateWidth)/2; if(window.screeHeight>=812&&window.screeWidth<768){ bgUrl1.style.left=left+"px"; bgUrl1.style.top=200*window.rateWidth+"px"; bgUrl1.style.width=600*window.rateWidth+"px"; bgUrl1.style.height=890*window.rateHeight+"px"; }else{ bgUrl1.style.left=left+"px"; bgUrl1.style.top=110*window.rateWidth+"px"; bgUrl1.style.width=600*window.rateWidth+"px"; bgUrl1.style.height=1100*window.rateHeight+"px"; } }, } </script>

 

js多张图片合成一张图,canvas(海报图,将二维码和背景图合并) -----vue

标签:for   int   ui设计   att   data   draw   pre   port   target   

原文地址:https://www.cnblogs.com/shuihanxiao/p/11459169.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!