H5 generate poster HTML2Canvas plug-in and network resource pictures to Base64

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:

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.

2. 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.