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.
/
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=".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/ponent.css" />
<!--[if IE]>
<script src=".js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="content">
<header class="codrops-header">
<h1>Image Resizing & Cropping <br /><span>with Canvas</span></h1>
</header>
<div class="ponent">
<div class="overlay">
<div class="overlay-inner">
</div>
</div>
<img class="resize-image" id='test-img'crossorigin="anonymous" src=".png" alt="image for resizing">
</div>
</div><!-- /content -->
</div> <!-- /container -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ponent.js"></script>
</body>
</html>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/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./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/ponent.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="content">
<header class="codrops-header">
<h1>Image Resizing & Cropping <br /><span>with Canvas</span></h1>
</header>
<div class="ponent">
<div class="overlay">
<div class="overlay-inner">
</div>
</div>
<img class="resize-image" id='test-img'crossorigin="anonymous" src="https://static-cdn.pixlr./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/ponent.js"></script>
</body>
</html>Thanks a lot.
Share Improve this question edited Nov 30, 2019 at 11:33 SuleymanSah 17.9k6 gold badges37 silver badges59 bronze badges asked Nov 30, 2019 at 7:36 Elvin PangElvin Pang 1211 gold badge4 silver badges14 bronze badges 2- 1 The canvas is tainted because you are using an image from another domain. This is the correct behaviour, for security reasons, and can't be overridden. If you need to do this, the image must reside on the same server. – marcus erronius Commented Nov 30, 2019 at 8:08
- Did you see stackoverflow./questions/22710627/…? – Zhuravlev A. Commented Nov 30, 2019 at 20:48
1 Answer
Reset to default 6There 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.