vue 前端绘制带参数的海报

vue绘制海报

1.绘制带参二维码

• 安装引入二维码插件
  安装 npm install qrcodejs2
  页面引入 import QRCode from 'qrcodejs2
  

<div class="qrcode" ref="qrCodeUrl"></div>
    <script>
    methods: {
        creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text:  url, // 设置二维码内容或跳转地址
              width: 100,// 宽度
              height: 100,// 高度
         })
         var mycanvas1=document.getElementsByTagName('canvas')[0]; 
         //0表示qrCodeUrl中的canvas在页面上是第几个
         this.url2 = this.convertCanvasToImage(mycanvas1);   //这个是获取二维码得图片
        },
    }
    mounted() {
           this.creatQrCode();
        },

    </script>

• 获取二维码base64图片
  

//在creatQrCode中引入这个方法
convertCanvasToImage(canvas) { 
    var image = new Image(); 
     let src = canvas.toDataURL("image/png"); 
     return src; 
}

2.图片绘制到画布上

先创建一个canvas标签，然后再绘制，利用canvas.toDataURL("image/jpeg"); 生成一张base64的图片

<canvas id="mycanvas" width="624" height="992"></canvas>
  doDraw(){
            let that = this;
            //  获取canvas
            var canvas = document.getElementById("mycanvas");
            var context = canvas.getContext('2d');
            //绘制背景图
            var img = new Image()
            img.src = this.shareImg;            
            //因为是网络图片，所以要加上可以跨域
            //如果是oss上的图片，需要把权限放开
            img.setAttribute('crossOrigin', 'anonymous');            
            img.onload = function(){                
                context.drawImage(img,0,0,img.width,img.height);                   
                let img2 = new Image();                
                img2.onload = function() {    
                    //这里注意，因为是base64的图片，所以要写this
                    context.drawImage(this, 44, 786,144, 144);                       
                    var imgEnd = canvas.toDataURL("image/jpeg");                            
                }
                img2.src = that.url2; 
            }  
        },