HTML5：JPG 上的绿屏效果答案

【问题标题】：HTML5: Green screen effect on JPGsHTML5：JPG 上的绿屏效果
【发布时间】：2014-01-27 10:11:59
【问题描述】：

由于 JPG 不支持透明度，而且在我的情况下，PNG 太大，我试图通过设置 alpha 颜色来替换颜色（我的示例是白色）。我的代码大致基于此：http://tech.pro/tutorial/1281/chroma-key-video-effects-using-javascript-and-the-html5-canvas-element

问题是，它什么也没做！此外，将框架颜色设置为任何东西似乎也没有更新。我知道这很简单，我就是无法破解它。

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;
}

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 在这里：http://jsfiddle.net/Bhqq8/2/

【问题讨论】：

如果你做一些调试，你会意识到这是一个XY问题，你真的需要问stackoverflow.com/questions/17035106/…
谢谢。我实际上做了一些调试并收到了安全警告。 IE 开发工具并没有解释它停止了图像处理，因此我认为还有其他问题。
一般来说，一旦您遇到未处理的异常，脚本执行就会停止，这就解释了您所看到的行为。
顺便说一句：JPEG 对颜色键控非常不利，因为它们在编码高对比度边缘时存在问题。即使您使用高品质，在对象的边界附近总会有一些颗粒。更好的图像格式是 PNG，但 PNG 已经支持 alpha 通道，因此很少需要这样做。

标签： html html5-canvas

【解决方案1】：

由于从外部站点加载图像并且 cors 启动，您遇到了安全错误。

幸运的是，您可以通过 imgur 请求跨域使用：

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

这相当于“匿名”请求。

更好的选择当然是从页面所在的同一服务器（您自己计算机上的本地服务器）加载图像。

这适用于getImageData 和toDataURL。

Modified fiddle 将 crossOrigin 设置为唯一更改。

【讨论】：

谢谢肯。是的，它最终将在同一台服务器上。