Tainted canvases may not be exported

Tainted canvases may not be exported Error

by pangkachun

HTML

<!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>
					<!-- This image must be on the same domain as the demo or it will not work on a local file system -->
					<!-- http://en.wikipedia.org/wiki/Cross-origin_resource_sharing -->
					<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>

CSS

.resize-container {
    position: relative;
    display: inline-block;
    cursor: move;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    top: 50px;
    left: 50px;
}

.resize-container img {
    display: block;
}

.resize-container:hover img,
.resize-container:active img {
    outline: 2px dashed rgba(222,60,80,.6);
}

.resize-handle-ne,
.resize-handle-se,
.resize-handle-nw,
.resize-handle-sw {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(222,60,80,.6);
    z-index: 999;
}

.resize-handle-nw {
    top: -5px;
    left: -5px;
    cursor: nw-resize;
}

.resize-handle-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}

.resize-handle-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}

.resize-handle-se {
    bottom: -5px;
    right: -5px;
    cursor: se-resize;
}

JavaScript

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;
   ...