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

Question

我正在尝试使用javascript，html，css创建一个页面，我可以从在线链接调整图像大小。但是，调整大小时，我遇到了使用Canvas.toDataURL()时可能无法导出受污染的画布的错误。我已经在谷歌和这里搜索了这个问题。有人建议将照片的交叉来源修改为匿名或"*"。我尝试了这两种方法，但它对我不起作用。我想知道任何人都可以提供帮助。我的代码在下面的链接中。

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>

多谢。

Answer 1

有几种方法可以解决这个问题，但所有这些方法都需要至少暂时在您的服务器上托管图像。最简单的选择是编写一个简单的 cgi 脚本，该脚本将 url 作为参数，在该 url 处获取图像，然后将其发送到浏览器，就好像它在服务器上一样。如果您希望用户能够选择本地图像，也可以使用文件上传表单。

请注意，如果执行此操作，则需要了解抓取用户选择的文件并像在您自己的服务器上一样提供它们的安全隐患。您至少要确保文件是有效的图像，而不是JavaScript文件(这可能会导致代码注入攻击(。

不允许导出受污染的画布数据的原因是这是一个用户安全问题。远程站点可以将不同的图像发送给不同的用户，如果您的站点只需在画布上绘制即可访问该图像，则该方法可用于窃取用户的私人数据。例如，亚马逊曾经让网站所有者在其网站中嵌入图像，最终成为包含问候语和最终用户姓名的定制广告。如果您可以在画布上绘制并导出数据，则可以将该数据发送回Web服务器并对其进行OCR以了解最终用户的名称。