Vue draws posters

1. Draw the qr code with reference

  • Install the import QR code plug-in

Import QRCode from ‘qrcodejs2

<div class="qrcode" ref="qrCodeUrl"></div>
    <script>
    methods: {
        creatQrCode() {
          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text:  url, // Set the content of the QR code or the forward address
              width: 100./ / width
              height: 100./ / height
         })
         var mycanvas1=document.getElementsByTagName('canvas') [0]; 
         //0 indicates the number of canvas in the qrCodeUrl on the page
         this.url2 = this.convertCanvasToImage(mycanvas1);   // This is the image of the qr code}},mounted() {
           this.creatQrCode();
        },

    </script>

Copy the code
  • Get the base64 image of qr code
// Introduce this method in creatQrCode
convertCanvasToImage(canvas) { 
    var image = new Image(); 
     let src = canvas.toDataURL("image/png"); 
     return src; 
}
Copy the code

2. Paint the picture onto the canvas

Create a Canvas tag and draw it using canvas.toDataURL(“image/ JPEG “); Generate a base64 image

<canvas id="mycanvas" width="624" height="992"></canvas>
  doDraw(){
            let that = this;
            / / get the canvas
            var canvas = document.getElementById("mycanvas");
            var context = canvas.getContext('2d');
            // Draw the background image
            var img = new Image()
            img.src = this.shareImg;            
            // Because it is a network image, so to add can cross domain
            // If it is an image on oss, you need to release the permission
            img.setAttribute('crossOrigin'.'anonymous');            
            img.onload = function(){                
                context.drawImage(img,0.0,img.width,img.height);                   
                let img2 = new Image();                
                img2.onload = function() {    
                    // This is a base64 image
                    context.drawImage(this.44.786.144.144);                       
                    var imgEnd = canvas.toDataURL("image/jpeg"); } img2.src = that.url2; }},Copy the code