为什么我的画布过滤器即使在渲染为画布后也不起作用？

Question

I am trying to develop a image filter using canvas.My image is converting to canvas as soon as it is loaded but the filter effect is not affecting the image at all,ie, image is unchanged in 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);
}

Now i updated my javascript,it is working if the image is taken from other sites but if i am taking image from same page,it's not applying filter again.

 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); }

 <img id="image" src="http://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"/> <canvas id="mycanvas" height="400" width="400"></canvas>

Answer 1

Edit Modified to read an uploaded image.

Modified your code a little, the ctx.drawImage at the end is causing the issue.

 /*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>