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

Question

我正在尝试使用canvas开发一个图像过滤器。我的图像在加载后立即转换为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，如果图像是从其他网站获取的，它就可以工作，但如果我从同一页面获取图像，它就不会再次应用过滤器。

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

编辑修改为读取上传的图像。

稍微修改了您的代码，最后的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>