Canvas.toDataURL() 受污染的画布可能无法导出

Question

I am trying to use javascript, html, css to create a page that I can resize an image from an online link. However, when resized, I faced the error that Tainted canvases may not be exported while using Canvas.toDataURL() . I have searched the issue in google and here. Somebody suggested to amend the photo's crossorigin to anonymous or '*'. I tried both methods but it doesn't work for me. I wonder anyone can offer help. My code is in the below link.

https://jsfiddle.net/pangkachun/7axkq9pe/1/

 var min_img_width = 60; var min_img_height = 60; var max_img_width = 1000; var max_img_height = 1000; var resizeableImage = function(image_target) { // Some variable and settings var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = {}, constrain = false, min_width = min_img_width, // Change as required min_height = min_img_height, max_width = max_img_width, // Change as required max_height = max_img_height, resize_canvas = document.createElement('canvas'), // ----------------- function to int the page ----------------------// init = function(){ // When resizing, we will always use this copy of the original as the base orig_src.src = image_target.src; orig_src.crossorigin = 'anonymous'; // Wrap the image with the container and add resize handles $(image_target).wrap('<div class="resize-container"></div>') .before('<span class="resize-handle resize-handle-nw"></span>') .before('<span class="resize-handle resize-handle-ne"></span>') .after('<span class="resize-handle resize-handle-se"></span>') .after('<span class="resize-handle resize-handle-sw"></span>'); // Assign the container to a variable $container = $(image_target).parent('.resize-container'); // Add events (one for resize (resize handle) and one for moving - img) // addEventListenor -> mouse touchdown, resize handle, resize_img $container.on('mousedown touchstart', '.resize-handle', startResize); }; // ------------------ end function to int the page -------------------------// // to save the data upon a event is fired saveEventState = function(e){ // Save the initial event details and container state event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset().left; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft(); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop(); // This is a fix for mobile safari // For some reason it does not allow a direct copy of the touches property if(typeof e.originalEvent.touches !== 'undefined'){ event_state.touches = []; $.each(e.originalEvent.touches, function(i, ob){ event_state.touches[i] = {}; event_state.touches[i].clientX = 0+ob.clientX; event_state.touches[i].clientY = 0+ob.clientY; }); } event_state.evnt = e; }; // function to redraw the image based on width and height redrawImage = function(width, height){ resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height); $(image_target).attr('src', resize_canvas.toDataURL("image/png")); }; //------------------------ resizing function starts ----------------------------// startResize = function(e){ e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on('mousemove touchmove', resizing); $(document).on('mouseup touchend', endResize); }; endResize = function(e){ e.preventDefault(); $(document).off('mouseup touchend', endResize); $(document).off('mousemove touchmove', resizing); }; resizing = function(e){ var mouse = {}, width, height, left, top, offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop(); // Position image differently depending on the corner dragged and constraints if( $(event_state.evnt.target).hasClass('resize-handle-se') ){ width = mouse.x - event_state.container_left; height = mouse.y - event_state.container_top; left = event_state.container_left; top = event_state.container_top; } else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){ width = event_state.container_width - (mouse.x - event_state.container_left); height = mouse.y - event_state.container_top; left = mouse.x; top = event_state.container_top; } else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){ width = event_state.container_width - (mouse.x - event_state.container_left); height = event_state.container_height - (mouse.y - event_state.container_top); left = mouse.x; top = mouse.y; if(constrain || e.shiftKey){ top = mouse.y - ((width / orig_src.width * orig_src.height) - height); } } else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){ width = mouse.x - event_state.container_left; height = event_state.container_height - (mouse.y - event_state.container_top); left = event_state.container_left; top = mouse.y; } if(width > min_width && height > min_height && width < max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called redrawImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({'left': left, 'top': top}); } } //------------------------ resizing functino end ----------------------------// init(); }; resizeableImage($('.resize-image'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en" class="no-js"> <head> <title>Image Resizing with Canvas</title> <link rel="stylesheet" type="text/css" href="css/component.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="content"> <header class="codrops-header"> <h1>Image Resizing &amp; Cropping <br /><span>with Canvas</span></h1> </header> <div class="component"> <div class="overlay"> <div class="overlay-inner"> </div> </div> <img class="resize-image" id='test-img'crossorigin="anonymous" src="https://static-cdn.pixlr.com/images/image-design.png" alt="image for resizing"> </div> </div><!-- /content --> </div> <!-- /container --> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/component.js"></script> </body> </html>

Thanks a lot.

Answer 1

There are a couple ways to get around this, but all of them will require at least temporarily hosting the image on your server. The simplest option would be to write a simple cgi script that takes an url as a parameter, fetches the image at that url, and sends it on to the browser as though it was on your server. You could also use a file upload form if you want the user to be able to select a local image.

Note that if you do this, you would want to be aware of the security implications of grabbing user-selected files and serving them as if they were on your own server. You would, at a minimum, want to make sure the files were valid images, and not, say, javascript files (which might lead to code injection attacks).

The reason exporting of tainted canvas data is disallowed is that it's a user security issue. Remote sites can send different images to different users, and if your site can gain access to that just by drawing it on a canvas, that method could be used to steal a user's private data. For example, Amazon used to let website owners embed an image in their site that would end up being a customized ad including a greeting and the end-user's name. If you could paint that on a canvas and export the data, you could send that data back to your webserver and OCR it to learn the name of the end-user.