converting img to greyscale using js faced security error

I’m doing a fallback for older phones, I can’t merely use css, I found a method turning images into greyscale images using js.

http://jsfiddle.net/4uznof97/

  var imgObj = document.getElementById('templateBg');

  function gray(imgObj) {
      var canvas = document.createElement('canvas');
      var canvasContext = canvas.getContext('2d');

      var imgW = imgObj.width;
      var imgH = imgObj.height;
      canvas.width = imgW;
      canvas.height = imgH;

      canvasContext.drawImage(imgObj, 0, 0);
      var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

      for (var y = 0; y < imgPixels.height; y++) {
          for (var x = 0; x < imgPixels.width; x++) {
              var i = (y * 4) * imgPixels.width + x * 4;
              var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
              imgPixels.data[i] = avg;
              imgPixels.data[i + 1] = avg;
              imgPixels.data[i + 2] = avg;
          }
      }
      canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
      return canvas.toDataURL();
  }
  imgObj.src = gray(imgObj);

But I got this error

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.


Source: css3

Leave a Reply