Html2canvas plug-in (The website address) :

Html2canvas plug-in is equivalent to building all the elements in the corresponding DOM node according to its attributes, and then generating screenshots to save, some CSS attributes it cannot recognize (cannot understand), so there will be some deviation, but it is not a big problem

Browser compatibility:

  • Firefox 3.5 +
  • Google Chrome
  • Opera 12+
  • IE9 +
  • Edge
  • Safari 6+

Installation and introduction:

npm install html2canvas

# document is the node to draw, and option is some configurable options
import html2canvas from 'html2canvas'html2canvas(document,option).then(canvas=>{...... })Copy the code
Option partial available parameters:
The parameter name type The default value describe
allowTaint boolean false Whether cross-domain is allowed
background string #ffffff The background color of the canvas, if not specified in the DOM, is set to transparent
canvas document null The existing Canvas element is used as the basis for drawing
imageTimeout number 15000 Timeout for loading an image, in milliseconds. A value of 0 disables timeout
timeout number 0 Image loading delay, default is 0(millisecond)
logging boolean true Output in console.log() for debugging
proxy string undefined Sets the cross-domain proxy address. If left blank, cross-domain images will not be loaded
taintTest boolean true Whether to test images before rendering
useCORS boolean false Did you try to load images from the server using CORS? (Also cross-domain images, I didn’t succeed when I used them, for unknown reasons)
width number null Width of the canvas
width height null Height of the canvas

If you want to exclude elements from the rendering, you can add the data-html2Canvas-ignore attribute to those elements, and HTML2CNAVas will exclude them from the rendering

On various codes:

Nodes that need to be converted to images are placed in the imageWrapper node. Elements outside the node are not used to generate posters, so ignore the above one. Then spread the entire canvas over the page, set the highest level, transparency set to 0, you can achieve long press save!

//Share.vue --- html
<div class="share"> <div class="imageWrapper" ref="imageWrapper"> <img class="real_pic" :src="dataURL" /> <! <img class="canvas-title" SRC ="@/images/canvas-title.png" Alt /> <div class="canvas-info"> <div class="info-content"> <span> MY name is </span> <span>{{userinfo.name}}</span> </div> <div Class ="info-content"> <span> from </span> <span>{{userinfo.userschool}}</span> </div> <div Class ="info-content"> at **** university </div> <div class="info-content"> <span> study </span> <span class="study-day">{{ Userinfo.study_day}}</span> <span> </span> </div> <div class="canvas-footer"> <div class="canvas-user"> <img :src="userInfo.user_image" alt /> </div> </div> <div class="canvas-er"> <img :src="userInfo.share_qrcode" alt /> <div Class = "text" > long press save pictures < / div > < div class = "text" > sweep code study together < / div > < / div > < / div > < / slot > < / div > < div Class ="watermark"> Long press poster to save image </div> </div>Copy the code

When mounted, call generate, image loading is sometimes slow, it is best to add a delay outside

//Share.vue --- js
html2canvas(){
    setTimeout((a)= > {
        html2canvas(this.$refs.imageWrapper, {
            backgroundColor: null.// There is a possibility that the generation will have a white edge, but there is no white edge
            allowTaint: true.// Whether cross-domain images are allowed (official documentation, generation test)
            useCORS: true.taintTest: true
          })
        .then(canvas= > {
          // this.$refs.imageWrapper.appendChild(canvas)
          let dataURL = canvas.toDataURL("image/png");
          this.dataURL = dataURL;
          this.ready(dataURL); })},1000);
}
Copy the code

The problem summary

  1. At the beginning, cross-domain images were used, but sometimes the generated posters did not have corresponding images, so the images were uniformly converted to Base64 format. If there were no cross-domain problems, it would be better not to convert
** url */ getUrlBase64_pro(len,url) {// Network resource image to base64 // console.log()"Picture path",url)
  var canvas = document.createElement("canvas"); Var CTX = canvas.getContext("2d");
  return new Promise((reslove, reject) => {
    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.onload = function() {
      canvas.height = len; //指定画板的高度,自定义
      canvas.width = len; //指定画板的宽度，自定义
      ctx.drawImage(img, 0, 0, len, len); //参数可自定义
      var dataURL = canvas.toDataURL("image/");
      canvas = null;
      reslove(dataURL);
    };
    img.onerror = function(err){
      reject(err)
    }
    img.src = url;
  });
}
Copy the code

Since there are multiple pictures, I directly make a promise, and then use Promise.all to synchronize multiple pictures and regenerate them into posters. Once conversion, lifetime benefit.

  1. There is a line in the poster pictures generated by some Android phones, but there is no line in the poster pictures generated by IOS. I thought it was the problem with the cut pictures, but later I changed the pictures, so I don’t know whether it is the compatibility problem or my style.