使用 JavaScript 将 Img url 转换为 dataurl
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25690641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Img url to dataurl using JavaScript
提问by adam0101
Using JavaScript, I want to convert an img tag like this:
使用 JavaScript，我想像这样转换一个 img 标签：
<img width="11" height="14" src="http://mysite/file.gif" alt="File Icon">
Into one with a dataurl like this:
与这样的 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">
Is this possible?
这可能吗？
回答by Drew Faubion
First, load the image into a canvas
首先，将图像加载到画布中
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);
}
}
Make sure to update the context.drawImage(base_image, 100, 100);to values appropriate for your application.
确保将 更新context.drawImage(base_image, 100, 100);为适合您的应用程序的值。
Source: https://stackoverflow.com/a/6011402/3969707
来源：https: //stackoverflow.com/a/6011402/3969707
Then convert the canvas to data.
然后将画布转换为数据。
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
回答by adam0101
Here's how to get the data url of an image with fetch:
以下是如何使用以下命令获取图像的数据 url 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`
})();
回答by Liam
This really isn't something you may want to do in JavaScript as it requires the image be parsed in JavaScript which is very slow. You would be loading the image and then putting the output of the function into the imgtag, which doesn't save bandwidth, decrease complexity, or improve security.
这真的不是你可能想在 JavaScript 中做的事情，因为它需要在 JavaScript 中解析图像，这非常慢。您将加载图像，然后将函数的输出放入img标记中，这不会节省带宽、降低复杂性或提高安全性。
Your best bet is to do this server-side. I've used this to great success in the past for generating pages which need to have absolutely no linked/referenced external resources. You can, for jsPDF, then use raw JavaScript or jQuery to get the data of an image to pass into the PDF creation process.
最好的办法是在服务器端做这个。过去，我已经使用它取得了巨大的成功，用于生成绝对不需要链接/引用外部资源的页面。对于 jsPDF，您可以使用原始 JavaScript 或 jQuery 获取图像数据以传递到 PDF 创建过程。
This will work everywhere and not rely on resorting to canvaswhich doesn't have full mobile browser support.
这将适用于任何地方，而不是依赖于canvas没有完整的移动浏览器支持。
