Solve the error when downloading the canvas with images canvas

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

1: Background

Recently doing a picture content identification project, using Alibaba's payment interface. General process is:

1: Users upload pictures
2: The image is converted to base64 format to send Ali interface
3: Ali returned interface picture content information

2: problems encountered

The second step this side turn base64, I used the canvas html5, to draw a picture on the canvas, and then use the method toDataURL the canvas.
But two problems encountered in the process of image transition in base64,

• 1: The picture can not be drawn, turn into base64 open empty canvas with transparent browser, as

 

image.png

The following code snippet:

  var Canvas = document.getElementById ( "Canvas"), // obtain Canvas 
      ctx = canvas.getContext ( "2d"), // corresponding CanvasRenderingContext2D objects (brush) 
      img = new new Image (), // create a new picture object 
      = Base64 ''; // Base64 

  img.src = 'HTTP: //www.xxxx.png' ; 
  ctx.drawImage (IMG, 0,0 ); 
  Base64 = canvas.toDataURL ( "Image / PNG");

This time I think the question should be  the picture has not finished loading  has been drawn up, as is the case, then modify the following:

  var Canvas = document.getElementById ( "Canvas"), // obtain Canvas 
      ctx = canvas.getContext ( "2d"), // corresponding CanvasRenderingContext2D objects (brush) 
      img = new new Image (), // create a new picture object 
      = Base64 ''; // Base64 
  img.src = 'HTTP: //www.xxxx.png' ; 
  img.onload = function () { // images finished loading, and then draw the toDataURL 
       ctx.drawImage (IMG, 0, 0 );     
       Base64 = canvas.toDataURL ( "Image / PNG" ); 
   };

The modification is completed I'm going to celebrate a cup of water, a refresh the page, an old blood sprayed out, chrome console and given as follows:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Probably means canvas unable to perform toDataURL method: Contamination of the canvas can not be output , please forgive my soul translation.
By google found that the strategy is limited by CORS, there will be cross-domain problem, although you can use an image (such as append to the page) but will pollute the canvas to draw the canvas, a canvas once contaminated, you can not extract data canvas, For example, use can not be used canvas toBlob (), toDataURL (), or getImageData () method; when using these methods will throw a security error

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Specific details attach a link to a very detailed as follows: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image , well worth a look, individuals may not understand the place, it is recommended to read this link .

solution:

Image Set: crossOrigin property
code snippet: img.setAttribute ( "crossOrigin", ' Anonymous')

Complete code:

``
   Var Canvas = document.getElementById ( "Canvas"), // obtain Canvas 
      ctx = canvas.getContext ( "2d"), // corresponding CanvasRenderingContext2D objects (brush) 
      img = new new Image (), // create a new image Object 
      Base64 = ''; // Base64 
  img.src = 'HTTP: //www.xxxx.png' ; 
  img.setAttribute ( "the crossOrigin", 'Anonymous' ) 
  img.onload = function () { // image loading End, and then draw the toDataURL 
       ctx.drawImage (IMG, 0,0 );     
       Base64 = canvas.toDataURL ( "Image / PNG" );
   };

On stackoverflow Solution:
Address: https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror

Tips : If you have other questions about SecurityError canvas, you can also try this solution.
Also after multiple searches, summed up a few tips

1: Use google. baidu search is and turn to the articles, too much interference.
2: First search bug House: stackoverflow, there is always a solution to your bug program, link: https://stackoverflow.com/
3: House web documents: mozilla web documents, very authoritative, very detailed. Links: https://developer.mozilla.org/en-US/