Question

使用JavaScript，我想转换像这样的img标签：

<img width="11" height="14" src="http://mysite/file.gif" alt="File Icon">

使用像这样的数据库：

<img width="11" height="14" src="data:image/gif;base64,R0lGODlhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon">

这可能吗？

Answer 1

首先，将图像加载到画布

var canvas = document.createElement("canvas");
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}

确保将context.drawImage(base_image, 100, 100);更新为适合您应用的值。

来源：https://stackoverflow.com/a/6011402/3969707

然后将画布转换为数据。

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

来源：https://stackoverflow.com/a/15685877/3969707

Answer 2

这在JavaScript中你可能不想做什么，因为它需要在JavaScript中解析图像，这非常慢。您将加载图像，然后将函数的输出放入img标记，这不会节省带宽，降低复杂性或提高安全性。

最好的办法就是做服务器端。我过去使用它来取得巨大成功，用于生成需要绝对没有链接/引用外部资源的页面。对于jsPDF，您可以使用原始JavaScript或jQuery来获取图像数据以传递到PDF创建过程。

这可以在任何地方使用，而不是依赖于canvas，而{{1}}没有完整的移动浏览器支持。

Answer 3

以下是如何使用fetch获取图片的数据网址：

(async function() {
    let blob = await fetch("https://example.com/image.png").then(r => r.blob());
    let dataUrl = await new Promise(resolve => {
      let reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.readAsDataURL(blob);
    });
    // now do something with `dataUrl`
})();

Answer 4

我会用一个与加载的图像大小相同的临时画布元素来解决这个问题：

function imageToUri(url, callback) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    base_image = new Image();
    base_image.src = url;
    base_image.onload = function() {
        canvas.width = base_image.width;
        canvas.height = base_image.height;

        ctx.drawImage(base_image, 0, 0);
    
        callback(canvas.toDataURL('image/png'));

        canvas.remove();
    }
}

imageToUri('./assets/some_image.png', function(uri) {
    console.log(uri);
});

Img url使用JavaScript进行dataurl

4 个答案: