Question

I want to convert image to grayscale on canvas by using Kinetic.js. So I write the following code,
var stage = new Kinetic.Stage({
container: ‘container’,
width: 1000,
height: 500
});

var layer = new Kinetic.Layer();
var image = new Image();
image.onload = function() {
  var img = new Kinetic.Image({
    x: 100,
    y: 30,
    image: image
  });

  layer.add(img1);
  stage.add(layer);

  img.applyFilter({
      filter: Kinetic.Filters.Grayscale,
      callback: function() {
        layer.draw();
      }
    });
};
image.src = "image.jpg";

“image.jpg” is local file and this code works on Firefox and IE, but not on chrome.
In addition, getImageData() doesn’t work on Chrome for local image. But w3schools said that Chrome support getImageData(). How can I solve this problem?

Answer 1

Try to open Chrome with the option --allow-file-access-from-file. It should allow file:/// access from file:/// pages which seems to be the case for your example.