使用 JavaScript 将 Img url 转换为 dataurl答案

【问题标题】：Img url to dataurl using JavaScript使用 JavaScript 将 Img url 转换为 dataurl
【发布时间】：2014-10-30 16:31:17
【问题描述】：

使用 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">

这可能吗？

【问题讨论】：

Convert image to base64 with javascript 的可能重复项
你为什么要这样做？
因为 jsPDF 似乎只支持这样的图像。
我不认为这是该答案的重复，因为他正在从服务器下载二进制数据并将其转换为 Base64。如果可能，我正在尝试将客户端上的绝对 url 转换为 base64，而无需再次下载。
@RomainBraun，仍然，该问题和答案将字符串转换为 Base64。我没有要转换的字符串，只有一个 url。 btoa() 函数不接受 url。

标签： javascript html image data-uri

【解决方案1】：

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

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

    var 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);
});

【讨论】：

【解决方案2】：

下面是如何获取带有fetch的图片的数据url：

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

【讨论】：

这会以data:text/html 的形式返回，我正在尝试获取data:image/png

【解决方案3】：

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

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

这将适用于任何地方，而不是依赖于不支持移动浏览器的canvas。

【讨论】：

如果我将这些数据存储在本地存储上会怎样？首先我下载图像，然后将其存储在用户的本地存储中。然后用户可以从他们的本地存储中加载该图像。如果图像已经下载，则用户可以跳过下载部分，这可能会提高性能。这样可以吗？
浏览器缓存可以很好地处理这个问题，因此在大多数应用程序中，您不应该在大多数项目中将图像存储在本地存储中。如果这是您真正想要做的事情，那么还有另一个 SO question 很好地涵盖了这一点。它使用画布，但现在所有现代网络浏览器都可以使用它：-stackoverflow.com/questions/19183180/…

【解决方案4】：

首先，将图像加载到画布中

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

【讨论】：

谢谢！这很好用，但事实证明，如果我在 jsPDF 中包含 html2canvas，它会为我转换图像！