HTML5：JPGs上的绿屏效果

因为JPG不支持透明度，在我的例子中，PNG太大了，所以我试图通过设置alpha颜色来替换颜色（我的示例是白色）。我的代码大致基于以下内容：

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

HTML

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

JS

#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);

var img=$（“img”）.get（0）；
var$canvasbg=$（“”）；
var canvas=$（“”）。获取（0）；
$canvasbg.append（canvas）；
$（“#容器”）.append（$canvasbg）；
var$container=$（“#container”）；
var context=canvas.getContext（'2d'）；
canvas.width=img.clientWidth；
canvas.height=img.clientHeight；
$container.width（img.clientWidth）；
$集装箱高度（如集装箱重量）；
drawImage（img，0,0）；
var frame=context.getImageData（0，0，canvas.width，canvas.height）；
变量长度=frame.data.length；
对于（VARI=0；I240&&g<256&&r>240&&r<256&&b>240&&b<256）{
帧数据[i*4+3]=0；
} 
}
putImageData（帧，0,0）；

---

jshiddle here:

由于从外部站点加载映像，并且cors启动，您将收到一个安全错误

幸运的是，使用imgur，您可以通过以下方式请求跨源使用：

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

这相当于“匿名”请求

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

这适用于

getImageData

和

toDataURL

---

将crossOrigin设置为唯一更改。

如果您要进行一些调试，您会意识到这是一个XY问题，您真的需要问一问谢谢。实际上我做了一些调试，得到了一个安全警告。IE Dev tools没有解释它因此停止了图像处理，因此我认为还有其他错误。通常，一旦出现未处理的异常，脚本执行就会停止，这解释了您看到的行为。顺便说一下：JPEG对颜色键控非常不利，因为它们在编码高对比度边缘方面存在问题。即使使用高质量，在对象边界附近也总会有一些纹理。一个更好的图像格式是PNG，但是PNG已经有了alpha通道的支持，所以这很少有必要。谢谢Ken。是的，它最终会在同一台服务器上。