图网址dataurl使用JavaScript

使用JavaScript，我想img标签这样的转换：图网址dataurl使用JavaScript

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

这可能吗？

来源

2014-09-05 adam0101

可能重复（http://stackoverflow.com/questions/10982712/convert-binary -data-to-base64-with-javascript） – Dalorzo 2014-09-05 16:59:09

你为什么要这么做？ – Brad 2014-09-05 16:59:38

因为jsPDF似乎只支持那样的图像。 – adam0101 2014-09-05 17:00:31

首先，图像加载到画布

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

来源

2014-09-05 17:05:22

谢谢！这工作得很好，但事实证明，如果我包含html2canvas与jsPDF它会照顾为我转换图像！ – adam0101 2014-09-05 20:51:38

这个真没有，你可能要在JavaScript中做一些事情，因为它需要在图像中的JavaScript解析，这是非常缓慢的。您将加载图像，然后将该功能的输出放入img标签，这不会节省带宽，降低复杂性或提高安全性。

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

这可以在任何地方工作，不依赖于使用canvas，它没有完整的移动浏览器支持。

来源

2014-09-05 17:06:17 Liam

下面是如何获得的图像与fetch数据链接：[转换图像与JavaScript为Base64]

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

来源

2018-03-04 08:50:59 JoeRocc

图网址dataurl使用JavaScript

回答

相关问题