HTML5: Эффект зеленого экрана на JPG

Question

Поскольку JPG не поддерживают прозрачность, и в моем случае PNG слишком велики, я пытаюсь заменить цвет (мой пример - белый), установив альфа-цвет. Мой код примерно основан на этом: 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

Вы получаете ошибку безопасности из-за изображения, которые загружаются из внешнего сайта и Корс пинков в

К счастью, с Imgur вы можете запросить использование кросс-происхождения, делая это:.

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

Это эквивалентно запросу «анонимный».

Лучшим вариантом является, конечно, загрузка изображения с того же сервера, на котором находится страница (локальный сервер на вашем собственном компьютере).

Это относится как к getImageData, так и к toDataURL.

Modified fiddle с crossOrigin комплект как только изменение.