getImageData - HTML5 2d Bağlamında kaybolan transparency

Question

getImageData ile ilgili garip bir sorun farkettim; Görüntü verisi alındığında görüntünün şeffaflığı göz ardı edilir gibi görünüyor.

herhangi bir görüntü imajı veriden önce canvas üzerine çizilmesine ihtiyaç beri

Bu soru canvas opak olma ile ilgili bir sorun olduğunu kabul, elde edilebilir. Ama ben hatalıydım,'u drawImage numaralı argüman olarak kullanmak saydamlığı korur.

Görüntüyü nasıl yüklediğimi burada;

var load_image = function(name, url, holder, callback) { 
    var img = new Image(); 
    img.src = url; 

    img.addEventListener('load', function(e) { 
     var canvas = make_canvas(e.target.width, e.target.height); 
     var ctx = canvas.getContext('2d'); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(e.target, 0, 0); 

     holder[name] = {canvas: canvas, ctx: ctx}; 

     delete e.target; 

     callback.call(); 
    }, false); 
}; 

callback sadece bir görüntü çizmek için draw_image çağırır çekme fonksiyonudur.

Her zamanki sürümü;

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) { 
    ctx.drawImage(img.canvas, sx, sy, w, h, dx, dy, w, h); 
}; 

Bu sadece drawImage için bir argüman olarak tuval alır ve muhafaza şeffaflık ile amaçlanan şekilde sonucudur. Example.

Görüntü verisi sürümü;

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) { 
    var imagedata = img.ctx.getImageData(sx, sy, w, h); 
    ctx.putImageData(imagedata, dx, dy); 
}; 

Bu seferki zamanki sürümde kullanılanla aynı tuval den yeterli dikdörtgenin görüntü verileri elde eden ve ben çizmek istiyorum tuval üzerine görüntü verilerini koyar. Şeffaflığın sürdürüleceğine inanıyorum ama bu böyle değil. Example. (Bu, origin-clean bayrağından dolayı bir Dropbox bağlantısıdır.)

Saydamlığın getImageData ile sürdürülmesi gerektiğini varsayarak hatalı mıyım? Yoksa sadece yanlış bir şekilde mi kullanıyorum?

Her iki durumda da, yardım gerçekten takdir edilecektir.

Answer 1

Sorununuzu, putImageData'nın kaynak ve hedef resim verilerini harmanlamak için composite operation kullanmıyor olduğuna inanıyorum. Bunun yerine, kırmızı, yeşil, mavi, ve alfa kanallarının tuvale doğrudan yazılmasını sağlar. Tamamen saydam pikseller için bu, beklediğiniz renkte görünebileceği veya görüntülenmeyeceği anlamına gelir.

Bunun yerine, bir ara tuval öğesi oluşturmak buna çizin ve ardından uygun globalCompositeOperation da uygulanan hedef tuvaline o işlemek için() DrawImage kullanabilirsiniz. Mask for putImageData with HTML5 canvas?, bu konuyu daha ayrıntılı olarak ele alır.

Güncelleme: "Kırık" örneğinize yazdığınız verilerin gerçekte ctx.getImageData(230,50,1,1).data yaparak şeffaf veriye sahip olduğunu doğrulayabilirsiniz. Sonuç [0,0,0,0] - yani tamamen şeffaf bir pikseldir.