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

思路: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>

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

时间: 2024-10-05 04:50:29

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

js、jq动态生成海报+动态生成二维码+Logo图片

前言: 最近做项目的时候移动端的发现板块作品需要生成海报,经查阅各种博客发现并没有很多资源,自己就着手写了一个分享给大家 废话不再多说,我们先看一下效果: 我是一名后端程小猿,写成这样已经很不错了,自我感觉良好 哈哈…… 废话不多说,我们开始上代码(怕对小白不友善,这里直接上源码,我自己就是小白 哈哈……): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

javaScript生成二维码(改造jquery.qrcode.js,使之支持中文,能带logo)

最近公司要求使用javaScript生成二维码,在网上搜了很多相关的资料,都不是很全面,俗话说:自己动手,丰衣足食. (这里吐槽下,有网友有了解决方案,却刻意把源代码压缩了,导致不知道改了什么东西,知识大家一起学习嘛,授人与鱼不如授人与渔!) 总结如下: 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 1 //q

利用phpqrcode二维码生成类库合成带logo的二维码并且用合成的二维码生成海报(二)

前期准备 引入phpqrcode类库(下载地址:https://download.csdn.net/download/weixin_37557729/11891240:支持彩色二维码的下载地址:https://download.csdn.net/download/weixin_37557729/11891244) PHP开启GD扩展库支持 1.利用phpqrcode生成二维码: 原理分析: 下载下来的类文件是一个压缩包,包含很多文件和演示程序,我们只需要里边的phpqrcode.php 这一个文

jquery.qrcode.min.js(支持中文转化二维码)

详情请看: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且

jquery.qrcode.min.js生成二维码

jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery.qrcode.min.js"></script> 2.构建容器 <div class=&q

二维码生成插件(jquery.qrcode.js)说明文档

jquery.qrcode.js 是一个纯浏览器用于生成二维码图片的插件,生成的 QRcode 无需下载图片,并且不依赖第三方服务,下面插件使用的是压缩版本,大小不超过4K qrcode.js 是实现二维码数据计算的核心类, jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)默认是canvas,canvas方式还支持右键图片下载 使用方法(jquery.qrcode.min.js)-----轻量级实现方式

js通过codeURL画二维码

一.函数封装 //生成微信二维码 function xyqrcode(options) { var settings = { dom:'', render: 'canvas', //生成二维码的格式还有image.div ecLevel:"H", text:"", background:"#ffffff", fill:"#333333", //二维码纹路的颜色 fontcolor:"#ff9818", fo

JAVA实现二维码生成加背景图

pom.xml依赖 <!-- 二维码生成 -->         <!-- https://mvnrepository.com/artifact/com.google.zxing/core -->         <dependency>             <groupId>com.google.zxing</groupId>             <artifactId>core</artifactId>   

4种方法生成二维码 (js 控制canvas 画出 二维码)

随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计.  二维码原理: 二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码. 堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成:矩阵式二维条码以矩阵的形式组成,在矩阵相应元素位置上用“点”表示二进制“1”, 用“空”表示二进制“0”,“点”和“空”的排列组成代码. 最近对二维码产生了兴趣 研究了一下二维码 这里生出的术语