Skip to content
Advertisement

Why my canvas filter is not working even after rendering as canvas?

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,i.e., 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>

Advertisement

Answer

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>
Advertisement