Question

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

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

Answer 1

由于图像是从外部网站加载的，因此会出现安全性错误，并且可以开始使用。

幸运的是，您可以通过这样做来请求跨域使用：

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

这相当于“匿名”请求。

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

这适用于getImageData和toDataURL。

Modified fiddle ，将crossOrigin设置为仅更改。

HTML5：JPG的绿屏效果

1 个答案: