Solve - use html2canvas interception page, div background page can not be intercepted and cross-domain

 

　　Today in the study html2canvas interception page, I found the pictures taken after the interception should not have to cut off the background picture element, background picture blank. At this time, Google browser console newspaper Failed to load resource: net :: ERR_CACHE_MISS picture and cross-domain error.

　　Use the useCORS: true after still can not solve this problem. So they want their own way, since the picture under different domain names have cross-domain issues, then the picture will turn into the base64 will also cross-domain issues. Just do it!

　　First I found on the Internet how to turn images into a network of base64 method (moving bricks to make me happy),

　　

 getBase64Image (img) {
      let canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
      let dataURL = canvas.toDataURL("image/" + ext);
      return dataURL;
    },

　　The request is then transferred to the background image into base64,

　　

== = datas.backgroundImg imgUrl the let null ""? : datas.backgroundImg; // request to the image path
           IF (imgUrl =! "" {)
             the this .imgUrl = imgUrl;
            let image = new Image();
            image.src "? v =" imgUrl + + = Math.random (); // handle cache 
            image.crossOrigin = "*"; // support cross-domain images 
            image.onload = function () {
              base64 the let = self.getBase64Image (Image); // call the function and turned it base64 Pictures
              $("#mains").css({
                "background-image": "url('" + base64 + "')",
                "background-size": "100% 100%",
                "background-repeat": "no-repeat"
              });
            };
          }

　　You're done, you can really find a try. It is worth saying that the problem I encountered only Google, but Firefox has no such problem, whether the problem is Google's own no-store and the no-cache?