我想知道一种在
JavaScript中将单个像素转换为base64的方法.理想的功能是:
function createPixel(hexColor,opacity){ //...Calculate return base64DataURL; }
我不太熟悉图像处理.任何格式都很好(png,gif等).我想使用这个来叠加背景图像(是的,我可以使用rgba css3,但我试图将它放在一个背景图像只在一个元素,所以我没有覆盖一个元素顶部的另一个达到效果) .
提前致谢.
编辑:我不想使用画布,我相信你可以使用canvas来获取base64 dataURL,但我确定它不如字符串操作那么快.此外,我不担心将图像转换为base64,但对创建图像更感兴趣.
解决方法
这是一个完全跨浏览器兼容的实现,使用< canvas> (
demo @ jsfiddle).
var canvas = document.createElement('canvas'); // http://code.google.com/p/explorercanvas/wiki/Instructions#Dynamically_created_elements if (!canvas.getContext) G_vmlCanvasManager.initElement(canvas); var ctx = canvas.getContext('2d'); canvas.width = 1; canvas.height = 1; // for simplicity,assume the input is in rgba format function createPixel(r,g,b,a) { ctx.fillStyle = 'rgba(' + [r,a].join() + ')'; ctx.fillRect(0,1,1); // 'data:image/png;base64,'.length => 22 return canvas.toDataURL('image/png','').substring(22); }
我很好奇,看看这是如何叠加在icktoofay’s answer,性能方面.注意,这将不得不使用excanvas的IE< 9,这意味着性能几乎肯定会更糟(但是新的). 查看jsperf:http://jsperf.com/base64image