Javascript以dataURL格式生成透明1X1像素

我想知道一种在 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

原文地址：https://www.jb51.cc/js/153341.html