我想知道一种在 JavaScript 中生成单个像素并将其转换为 base64 的方法。理想的函数是：
function createPixel(hexColor, opacity){
//...Calculate
return base64DataURL;
}
我对图像处理不是很熟悉。任何格式都可以（png、gif 等）。我想用它来覆盖背景图像，（是的，我可以使用 rgba css3，但我试图将其与背景图像仅放在一个元素上，因此我不会将一个元素覆盖在另一个元素之上以达到效果） 。
提前致谢。
编辑：我不想使用canvas，我确信您可以使用canvas来获取base64 dataURL，但我确信它不如字符串操作那么快。另外，我并不担心将图像转换为 Base64，而是对创建图像更感兴趣。
4 年多后，这里有一个更简单的解决方案，可以生成标准 GIF，因此实际上可以在浏览器中运行（我无法让 PEM 解决方案在其中运行）anything）并且比 PEM/canvas 快一个数量级。唯一的缺点是 GIF 不支持 alpha 不透明度 - 但这可以通过 CSS 进行控制。
它基于这个 JSFiddle http://jsfiddle.net/LPxrT/（未知的美丽作者），但经过基本优化 - 重用 keyStr 并接受十六进制字符串（'#FF0000'）和十六进制文字（0xFF0000） - 后者更快（谢谢伊克图费).
<html>
<body onload="Test()">
<script>
function Test() {
var img = new Image;
img.src = createPixelGIF(0xff0000); // generate a red pixel data URI
img.height = 100;
img.width = 100; // optional: add dimensions
document.body.appendChild(img); // add to the page
}
// ROUTINES =============
var createPixelGIF = (function() {
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
return function createPixelGIF(hexColor) {
return "data:image/gif;base64,R0lGODlhAQABAPAA" + encodeHex(hexColor) + "/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
}
function encodeHex(hexColor) {
var rgb;
if (typeof hexColor == 'string') {
var s = hexColor.substring(1, 7);
if (s.length < 6) s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
rgb = [parseInt(s[0] + s[1], 16), parseInt(s[2] + s[3], 16), parseInt(s[4] + s[5], 16)];
} else
rgb = [(hexColor & (0xFF << 16)) >> 16, (hexColor & (0xFF << 8)) >> 8, hexColor & 0xFF];
return encodeRGB(rgb[0], rgb[1], rgb[2]);
}
function encodeRGB(r, g, b) {
return encode_triplet(0, r, g) + encode_triplet(b, 255, 255);
}
function encode_triplet(e1, e2, e3) {
enc1 = e1 >> 2;
enc2 = ((e1 & 3) << 4) | (e2 >> 4);
enc3 = ((e2 & 15) << 2) | (e3 >> 6);
enc4 = e3 & 63;
return keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
})();
</script>
</body>
</html>
更新的 JSPerf 结果：http://jsperf.com/base64image/4 http://jsperf.com/base64image/4（上面的代码是“createPixelGIF2”）。你会看到我尝试了进一步的优化（3+4），但似乎 JS 更喜欢堆栈操作而不是难以阅读的组合函数:)
我还添加了对画布方法的更新测试，由于某种原因，该测试排除了画布对象的实例化 - 这是在现实世界使用中看到的最大性能拖累。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
