Img url使用JavaScript进行dataurl

Question

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

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

进入一个像这样的dataurl：

<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。

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`
})();