gpt4 book ai didi

javascript - Canvas.toDataURL() 受污染的 Canvas 可能无法导出

转载 作者:太空宇宙 更新时间:2023-11-04 05:41:58 25 4
gpt4 key购买 nike

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

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>

非常感谢。

最佳答案

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

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

不允许导出受污染的 Canvas 数据的原因是这是一个用户安全问题。远程站点可以向不同的用户发送不同的图像,如果您的站点仅通过在 Canvas 上绘制就可以访问该图像,则该方法可用于窃取用户的私有(private)数据。例如,亚马逊曾经让网站所有者在他们的网站中嵌入一张图片,最终成为包含问候语和最终用户姓名的定制广告。如果您可以在 Canvas 上绘制并导出数据,则可以将该数据发送回您的网络服务器并对其进行 OCR 以了解最终用户的姓名。

关于javascript - Canvas.toDataURL() 受污染的 Canvas 可能无法导出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59114212/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com