Почему мой фильтр холста не работает даже после рендеринга как холст?

Question

Я пытаюсь разработать фильтр изображений с использованием canvas. Мое изображение преобразуется в canvas, как только оно загружено, но эффект фильтра не влияет на изображение вообще, т. Е. Изображение на холсте не изменяется.

<img id="image" src="file:///C:/Users/G%20COMTECH%20SYSTEM/Favorites/Pictures/2015-01/2.%20Knitting%20Balls.jpg" />




<script type="text/javascript">





var image = document.getElementById('image');

if(image.complete){ // From cache
desaturateImage(image);
} else { // On load
  image.addEventListener('load', function() {
     desaturateImage(image);
  });
}

function desaturateImage(image){
    var canvas = document.createElement('canvas');
    image.parentNode.insertBefore(canvas, image);
canvas.width  = image.width;
canvas.height = image.height;
image.parentNode.removeChild(image);

var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imgData.data;

for (var i = 0; i < data.length; i += 4) {
        var grey = (0.2126 * data[i]) + (0.7152 * data[i + 1]) + (0.0722 * data[i + 2]);
    data[i] = grey;
    data[i + 1] = grey;
    data[i + 2] = grey;
}
ctx.putImageData(imgData, 0,0);
ctx.drawImage(image, 0, 0);
}

Теперь я обновил свой javascript, он работает, если изображение взято с других сайтов, но если я беру изображение с той же страницы, оно не применяет фильтр снова.

<script type="text/javascript">
//var url = //\\'http://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';
var sample=document.getElementById('image');
var url=sample.src;
var image = new Image();
document.write(sample.src);
image.src = url + '?' + new Date().getTime();
//image.setAttribute('crossOrigin', '');
document.write(image.src);

image.onload = function(){
  desaturateImage(this);
}

function desaturateImage(image) {
  var canvas = document.getElementById('mycanvas');
  canvas.width = 400;
  canvas.height = 400;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0,0);
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imgData.data;

  for (var i = 0; i < data.length; i += 4) {
    var grey = (0.2126 * data[i]) + (0.7152 * data[i + 1]) + (0.0722 * data[i + 2]);
    data[i] = grey;
    data[i + 1] = grey;
    data[i + 2] = grey;
  }
  ctx.putImageData(imgData, 0, 0);
  //ctx.drawImage(image, 0, 0);
}</script>

<img id="image" src="file:///C:/Users/G%20COMTECH%20SYSTEM/Favorites/Pictures/2015-01/2.%20Knitting%20Balls.jpg"/>
<canvas id="mycanvas" height="400" width="400"></canvas>

Answer 1

Редактировать Изменено для чтения загруженного изображения.

Немного изменил ваш код, ctx.drawImage в конце вызывает проблему.

/*var url = 'http://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';
var image = new Image();
image.src = url + '?' + new Date().getTime();
image.setAttribute('crossOrigin', '');
image.onload = function(){
  desaturateImage(this);
}*/

function openFile(file){
  var input = file.target;
  var reader = new FileReader();
  reader.onload = function(){
    var image = new Image();
    image.src = reader.result;
    image.setAttribute('crossOrigin', '');
    image.onload = function(){
      desaturateImage(image);
    }
  }
  reader.readAsDataURL(input.files[0]);
}

function desaturateImage(image) {
  var canvas = document.getElementById('mycanvas');
  canvas.width = image.width;
  canvas.height = image.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(image, 0, 0);
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imgData.data;

  for (var i = 0; i < data.length; i += 4) {
    var grey = (0.2126 * data[i]) + (0.7152 * data[i + 1]) + (0.0722 * data[i + 2]);
    data[i] = grey;
    data[i + 1] = grey;
    data[i + 2] = grey;
  }
  ctx.putImageData(imgData, 0, 0);
  //ctx.drawImage(image, 0, 0);
}

<input type='file' accept='image/*' onchange='openFile(event)'><br/>
<canvas id="mycanvas"></canvas>