JavaScript生成dataURL格式的透明1x1像素 [英] Javascript generate transparent 1X1 pixel in dataURL format

问题描述

我想知道如何在JavaScript中生成单个像素，并将其转换为base64。理想的函数应该是：

function createPixel(hexColor, opacity){
   //...Calculate
   return base64DataURL;
}

我对图像处理不是很熟悉。任何格式都可以(png、gif等)。我想用它来覆盖背景图像(是的，我可以使用RGBA CSS3，但我试图将其与背景图像一起放置在一个元素上，这样我就不会将一个元素叠加到另一个元素上以达到效果)。

提前感谢。

编辑：我不想使用Canvas，我相信您可以使用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,g,b,a].join() + ')';
    ctx.fillRect(0,0,1,1);
    // 'data:image/png;base64,'.length => 22
    return canvas.toDataURL('image/png','').substring(22);
}

我很想看看它在性能方面与icktoofay's answer有什么不同。请注意，这将不得不对IE<；9使用excanvas，这意味着那里的性能几乎肯定会更差(但新特性)。

查看jsperf：http://jsperf.com/base64image

这篇关于JavaScript生成dataURL格式的透明1x1像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！