На холсте HTML5 в javascript я использую элемент закадрового холста для рисования изображения. Затем я переношу часть этого изображения на другой холст на экране. Исходное изображение - PNG с альфа-каналом. однако к тому времени, когда изображение выводится на экран, его альфа-канал исчезает, и он просто имеет белый фон.
Этот вид имеет смысл, но я не могу найти много с точки зрения документации о том, как сэмплировать фрагмент изображения, выполнить какое-то действие за кадром, а затем перенести изображение на экранный холст с неповрежденным альфа-каналом.
Вот небольшая демонстрация (извинения, она взломана из гораздо большего куска кода):
//this is all nested in an MVC view, using jQuery/Backbone
this.pasteboard = $("<canvas/>").attr("width",1200).attr("height",600)
this.pasteboard = this.pasteboard[0].getContext("2d");
var img = $("<img/>");
var t = this;
img.load(function(){
t.pasteboard.save();
t.pasteboard.clearRect(0,0,args.width,args.height)
t.pasteboard.drawImage(this,0,0);
log("obj args:",args)
o.imageData = t.pasteboard.getImageData(0,0,args.width,args.height);
t.pasteboard.restore();
o.ready = true;
o.trigger("ready",args);
}).attr("src",args.src);
// and somewhere else in the view object i use
this.ctx.putImageData(myimagedataobjecthere,0,0);
// all works fine except the alpha is now white background..
Предположительно, это из-за отсутствия сохранения альфа-канала между getimagedata и putimagedata?
У кого-нибудь есть указания на это? Как я уже говорил, я не смог найти немедленной документации по этому поводу ...
Большое спасибо действительно
A