2

Since JPGs don't support transparency and in my case, PNGs are far too large, I'm trying to replace a colour (my example is white) by setting the alpha colour. My code is roughly based on this: http://tech.pro/tutorial/1281/chroma-key-video-effects-using-javascript-and-the-html5-canvas-element

The problem is, it doesn't do anything! Also, setting the frames colour to anything also doesn't seem to update. I know it is something simply, I just can't crack it.

HTML

<div id="poo">
    <div id="container">
        <img id="source" src="http://i.imgur.com/RylDs1h.jpg" />
    </div>
</div>

CSS

#greend{
    background:black;
    width:600px;
}

JS

var img = $("img").get(0);
var $canvasbg = $("<div id='greend' />");
var canvas = $("<canvas></canvas>").get(0);
$canvasbg.append(canvas);
$('#container').append($canvasbg);

var $container =  $('#container');   
var context = canvas.getContext('2d');

canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
$container.width(img.clientWidth);
$container.height(img.clientHeight);
context.drawImage(img, 0, 0);

var frame = context.getImageData(0, 0, canvas.width, canvas.height);    
var length = frame.data.length;
for (var i =0; i <length; i++){
    var r = frame.data [i*4+ 0];
    var g = frame.data [i*4 + 1];
    var b = frame.data [i*4 + 2];

    // replace white-ish colours.
    if(g > 240 && g < 256 && r > 240 && r < 256 && b > 240 && b < 256){  
        frame.data[i * 4 + 3] = 0;  
    } 
}
context.putImageData(frame, 0, 0);

jsFiddle here: http://jsfiddle.net/Bhqq8/2/

Alex Guerin
  • 2,336
  • 10
  • 36
  • 53
  • If you were to do some debugging, you would realize this is an XY problem and you really need to ask http://stackoverflow.com/questions/17035106/context-getimagedata-operation-is-insecure – lc. Jan 09 '14 at 02:19
  • Thanks. I actually did some debugging and got a security warning. IE Dev tools didn't explain though that it stopped image manipulation as a result, hence I thought there was something else that was wrong. – Alex Guerin Jan 09 '14 at 02:23
  • In general once you get an unhandled exception, script execution stops, which explains the behavior you were seeing. – lc. Jan 09 '14 at 02:25
  • 2
    By the way: JPEGs are quite bad for color-keying, because they have problems with encoding high-contrast edges. Even when you use a high level of quality, you will always have some grain near the borders of objects. A better image format for this would be PNG, but PNG already has alpha channel support, so this is rarely necessary. – Philipp Jan 09 '14 at 21:27

1 Answers1

1

You are getting an security error due to the image being loaded from an external site and cors kicks in.

Luckily with imgur you can request cross-origin use by doing this:

<img id="source" src="http://i.imgur.com/RylDs1h.jpg" crossOrigin="" />

This is equivalent to "anonymous" request.

The better option is of course to load the image from the same server as the page resides on (local server on your own computer).

This applies to both getImageData and toDataURL.

Modified fiddle with crossOrigin set as only change.