数据uri - base64编码。你能用javascript自动完成吗？

Question

我对图像的base64编码有疑问。我使用base64作为小背景图像。我用在线base64工具转换它。并将其直接放在CSS文件中。

但是有办法吗？ base64编码自动进行。当我将文件上传到服务器或我运行网站时。然后在CSS中的小背景图像。将自动转换为base64编码。你明白了吗？

感谢您的帮助！

Answer 1

好吧，我不确定我是否完全理解你的问题。但是，<canvas>元素提供了一个名为.toDataURL()^help的函数，它将<canvas>节点中的内容转换为Base64编码的字符串。但是，无论如何，这对你的情况没有多大意义。

window.btoa()的相同故事。您需要将图像普通转移到客户端然后转换它们，这没有任何意义。因此，您需要一个在服务器上运行的工具/脚本，并将图像作为base64传输。猜猜看，它存在。

supplyJS

使用supplyJS，您可以创建一个类似

的调用

supply.listen('image/jpg', function(payload, filename) {
    jQuery('<img>', {
        src: 'data:image/jpeg;base64,' + payload
    }).appendTo(document.body);
});

supply.setDealer('/cgi-bin/supply.pl').files({
    images: [
        '/images/foo.jpg',
        '/images/bar.jpg',
        '/images/another.jpg'
    ]
});

它会将所有图像本地转换为base64以传输它们。

示例：http://www.typeofnan.com/lab/mxhr-stream/