【背景】 由于一些嵌入设备不支持透明色,我们在程序设计之初是通过颜色键表示透明色 我现在有一个背景图片(BG.bmp)和一个圆点(round.bmp),其中round.bmp的背景颜色为RGB(255,254,0) 在C#下我直接把要抠出的颜色在ColorKey中直接就能抠掉变成透明了
【现实】 但是现在因为某些标准(平台)要修改,有人提议顺便工作将要在HTML5平台上进行,然后提出将图形整合在CANVAS中(擦汗)。经过学习,我只了解到和“透明”有关的似乎只有globalAlpha,而通过它重绘后的缺陷却是会把整体图片变的偏红,不好分辨——尤其是当圆区的颜色为(255,255,0)的时候……
目前公司图库大概有100多万张,不可能为了新平台大搞第200万的图库吧?……所以希望各位前辈告知CANVAS是否有对颜色键的支持?如果有,烦请提供详细的介绍或有价值链接,如果没有我可以体现在可能性分析报告中。
好像没有颜色键 但canvas支持 像素级别的操作 你可以 读取像素的颜色 吧指定像素的颜色替换成你希望的透明色
吧一个canvas隐藏起来 绘制你的图片在分析像素 这个canvas可以作为你的填充素材
CANVAS好像没有对颜色键的支持
不过可以用getImageData() 方法返回画布的像素数据。 逐个像素判断,像素数据如果是指定颜色就将像素的alpha数据改为0
图片要onload之后才能用 var IMG2 = document.getElementById("PIC_LIB"); var PIC2 = IMG2.getContext("2d"); var BMP2 = new Image(); BMP2.src = ARROW_PIC_Name; BMP2.onload = function () { PIC2.drawImage(BMP2,0,0); var imgData = PIC2.getImageData(0,0,IMG2.width,IMG2.height); for(var i = 0;i<imgData.data.length;i+=4){ if(imgData.data[i] == 255 && imgData.data[i+1] ==0 && imgData.data[i+2]==255){ imgData[i+3] = 0; } } PIC.putImageData(imgData,0,0); }
|