Original address:
https://segmentfault.com/a/1190000038457321


The author:
Fw dragon


This article was first published at:
Think no

One, foreword

Front when using canvas synthetic images, if it involves cross-domain resources will cause the failure of drawing, the first thing you need to the resources in the server configuration allows cross domain access, secondly on the front end development process also need to pay attention to the way of using pictures, the following records the synthetic images used in the development of a number of ways need to be aware of.

II. Related technical processes

* Note: The reason for adding a timestamp is that the static resource may involve a CDN. It may be that the resource server allows cross-domain access, but the CDN that the resource is going to does not support cross-domain access. The timestamp is added to ensure that the source resource is loaded.

Three, code,

* Note: The following code only provides relevant details. It cannot be directly copied and used. You need to write relevant code by yourself according to the framework used

1. Usage of external chain of IMG tag

<img id="bg" src="" crossorigin="anonymous">
document.getElementById('bg').src = yourImgSrc + '? time=' + new Date().valueOf()

2. Js creates the Image object dynamically

var bg = new Image() bg.crossOrigin = 'anonymous' bg.onload = function() { // onload to do something } bg.src = yourImgSrc + '? time=' + new Date().valueOf()

4. Relevant documents

  • HTML2Canvas official API documentation
  • HTML2Canvas is a cross-domain image processing solution