将图像 url 转换为 Base64

Posted 2023-05-08

技术标签:

【中文标题】将图像 url 转换为 Base64【英文标题】：CONVERT Image url to Base64 【发布时间】：2014-04-06 00:38:08 【问题描述】：

使用图像文件，我得到图像的 url，需要发送到 web 服务。从那里图像必须本地保存在我的系统上。

我正在使用的代码：

var imagepath = $("#imageid").val();// from this getting the path of the selected image

that var st = imagepath.replace(data:image/png or jpg; base64"/"");

如何将图片url转成BASE64？

【问题讨论】：

How can you encode a string to Base64 in javascript?的可能重复如果您只是想对 url 而不是图像数据进行编码，您可能会在这里找到答案：***.com/questions/246801/… 【参考方案1】：

HTML

<img id=imageid src=https://www.google.de/images/srpr/logo11w.png>

JavaScript

function getBase64Image(img) 
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");


var base64 = getBase64Image(document.getElementById("imageid"));

此方法需要画布元素，即perfectly supported。

htmlCanvasElement.toDataURL() 的 MDN 引用。还有官方W3C documentation。

【讨论】：

我相信，当您在 JS 中创建和添加 <img> 时，这不起作用。因为我得到了Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.。 @Rubinous - 请参考this question。我认为您的问题/异常与我的代码无关。否则，请随时证明我错了。这是对 OP 问题的正确答案。为了我，我想在 CSS background-image 中使用 toDataURL 的实际结果。所以，我确实需要所有前面的data:image/png;base64, 东西，所以我直接返回了dataURL 的值（我不需要RegEx 替换）。谢谢！转换部分 var dataURL = canvas.toDataURL("image/png"); return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 在 Angular 上也很有效。你需要使用 img.naturalWidth 和 img.naturalHeight 来处理缩小的图片【参考方案2】：

查看此答案：@HaNdTriX 的https://***.com/a/20285053/5065874

基本上，他实现了这个功能：

function toDataUrl(url, callback) 
    var xhr = new XMLHttpRequest();
    xhr.onload = function() 
        var reader = new FileReader();
        reader.onloadend = function() 
            callback(reader.result);
        
        reader.readAsDataURL(xhr.response);
    ;
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();

在你的情况下，你可以像这样使用它：

toDataUrl(imagepath, function(myBase64) 
    console.log(myBase64); // myBase64 is the base64 string
);

【讨论】：

blob 是一种处理图像的可怕方式，因为它使用“屏幕截图”来制作图像。这意味着图像的不同大小取决于用户的屏幕分辨率在我使用打字稿的情况下，它是 console.log(myBase64);显示未定义 @TheCrazyProfessor 您如何建议在没有 blob 的情况下解决问题？谢谢！有时它通过 CROS 源请求错误使用 HttpRequest 进行调用以从 URL 接收图像【参考方案3】：

在今天的 JavaScript 中，这也可以工作..

const getBase64FromUrl = async (url) => 
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => 
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = () => 
      const base64data = reader.result;   
      resolve(base64data);
    
  );


getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)

【讨论】：

您将如何使用特定的图像 mimetype 来做到这一点？从未尝试过，但我认为blob.Properties.ContentType = "image/png" 会起作用已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。【参考方案4】：

这是你的html-

    <img id="imageid" src="">
    <canvas id="imgCanvas" />

Javascript 应该是-

   var can = document.getElementById("imgCanvas");
   var img = document.getElementById("imageid");
   var ctx = can.getContext("2d");
   ctx.drawImage(img, 10, 10);
   var encodedBase = can.toDataURL();

'encodedBase' 包含图像的 Base64 编码。

【讨论】：

【参考方案5】：

你可以用这个：

function ViewImage()
 function getBase64(file) 
  return new Promise((resolve, reject) => 
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  );

var file = document.querySelector('input[type="file"]').files[0];
getBase64(file).then(data =>$("#ImageBase46").val(data));

添加到您的输入 onchange=ViewImage();

【讨论】：

【参考方案6】：

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() 

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) 
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) 
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      
      fileReader.readAsDataURL(fileToLoad);
    
  
</script>

【讨论】：

这个很完美。这也是我jsfiddle.net/vibs2006/ed9j7epr的上述代码的Working Fiddle 您好，如何将其应用于远程 url 而不会遇到跨域问题？我们如何将远程 url 转换为 base64？不正确的解决方案【参考方案7】：

imageToBase64 = (URL) => 
    let image;
    image = new Image();
    image.crossOrigin = 'Anonymous';
    image.addEventListener('load', function() 
        let canvas = document.createElement('canvas');
        let context = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        context.drawImage(image, 0, 0);
        try 
            localStorage.setItem('saved-image-example', canvas.toDataURL('image/png'));
         catch (err) 
            console.error(err)
        
    );
    image.src = URL;
;

imageToBase64('image URL')

【讨论】：

【参考方案8】：

这是 Abubakar Ahmad 答案的打字稿版本

function imageTo64(
  url: string, 
  callback: (path64: string | ArrayBuffer) => void
): void 
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();

  xhr.onload = (): void => 
    const reader = new FileReader();
    reader.readAsDataURL(xhr.response);
    reader.onloadend = (): void => callback(reader.result);

【讨论】：

【参考方案9】：

我尝试使用top answer，但它发生在Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported。

我发现这是因为cross domain problems，解决办法是

function convert(oldImag, callback) 
    var img = new Image();
    img.onload = function()
        callback(img)
    
    img.setAttribute('crossorigin', 'anonymous');
    img.src = oldImag.src;

function getBase64Image(img,callback) 
    convert(img, function(newImg)
        var canvas = document.createElement("canvas");
        canvas.width = newImg.width;
        canvas.height = newImg.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(newImg, 0, 0);
        var base64=canvas.toDataURL("image/png");
        callback(base64)
    )

getBase64Image(document.getElementById("imageid"),function(base64)
// base64 in here.
    console.log(base64)
);

【讨论】：

【参考方案10】：

没关系，谢谢！

const getBase64FromUrl = async (url) => 
  const data = await fetch(url);
  const blob = await data.blob();
  return new Promise((resolve) => 
    const reader = new FileReader();
    reader.readAsDataURL(blob); 
    reader.onloadend = function() 
      const base64data = reader.result;   
      resolve(base64data);
    
  );


getBase64FromUrl('https://lh3.googleusercontent.com/i7cTyGnCwLIJhT1t2YpLW-zHt8ZKalgQiqfrYnZQl975-ygD_0mOXaYZMzekfKW_ydHRutDbNzeqpWoLkFR4Yx2Z2bgNj2XskKJrfw8').then(console.log)

【讨论】：

【参考方案11】：

let baseImage = new Image;
baseImage.setAttribute('crossOrigin', 'anonymous');
baseImage.src = your image url

var canvas = document.createElement("canvas");
  canvas.width = baseImage.width;
  canvas.height = baseImage.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(baseImage, 0, 0);
  var dataURL = canvas.toDataURL("image/png");

有关“启用 CORS 的图像”的其他信息：MDN Documentation

【讨论】：

建议您将转换包装在连接到已加载事件的事件处理程序中，因为尝试转换时可能未加载图像； ***.com/a/7442874/1098814 我收到错误***.com/questions/54108669/…

以上是关于将图像 url 转换为 Base64的主要内容，如果未能解决你的问题，请参考以下文章

如何在 ASP.NET 中将 base64 图像 URL 转换为用户友好 URL

在节点中将 svg 图像从 url 转换为 base64

使用 AngularJs 将 base64 格式的数据转换为图像

如何将 Firebase 上传图片的图片下载 URL 转换为 base64

如何将 URL 从 Webapi 传递到 <img> 标签以接受 base64 的图像？