如何将已显示在 div 中的图像转换为 base 64

Question

这是我的网址：

https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01

我正在尝试将 div 中显示的图像转换为 base64。

我也在尝试从获取请求 XMLHttpRequest 的图像转换图像。

.

我已经检查了这个问题的答案 1

I am unable to convert http.get image into base 64

我也检查了这个问题的答案2

How to convert image into base64 string using javascript

.

<div id="imgdiv">
    <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

<script>
    //something like this
    var imgbase64data = base64_encode(document.getElementById("imgdiv").img);
</script>

get 请求未显示我给定 url 中的任何内容。

但是有了这个在线转换器，它可以转换

https://www.askapache.com/online-tools/base64-image-converter/

.

如果我使用<img src=""> 标签并输入此网址，图片就会显示出来。

是否可以将显示的图像转换为 base 64.btoa() 或任何方式。

Answer 1

所有解决方案都可以工作，但我认为这里讨论了这个问题：CORS errors trying to convert remote image to base64 data

考虑以下代码：

$(function() {
  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();
  }

  var imgUrl = $("#imgdiv > img").attr("src");
  console.log("Img Url: " + imgUrl);
  toDataURL(imgUrl, function(dataUrl) {
    console.log('RESULT:', dataUrl)
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

当我对此进行测试时，它可以正常工作，然后产生错误：

Img Url: https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01 js:31:11
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

如果您可以访问服务器端脚本，例如 PHP，这可以很快完成。

更新

如果 URL 数据抓取对您不起作用，那么您必须使用 Canvas 方法：CONVERT Image url to Base64

$(function() {
  function getBase64Image(img) {
    var canvas = $("<canvas>");
    canvas.width(img.width());
    canvas.height(img.height());
    var ctx = canvas[0].getContext("2d");
    ctx.drawImage(img[0], 0, 0);
    var dataURL = canvas[0].toDataURL();
    return dataURL;
  }

  function clearData(sStr) {
    return sStr.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
  }

  var imgUrl = $("#imgdiv > img");
  var imgSrc = getBase64Image(imgUrl);
  var imgBase = clearData(imgSrc);
  console.log("Img Url: " + imgUrl.attr("src"));
  console.log("Img Src: " + imgSrc);
  console.log("Base64: " + imgBase);
  $("#imgdiv").after("<img src='" + imgSrc + "'>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

这提供了以下响应：

Img Url: https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01
Img Src: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=
Base64: iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII= js:33:11

更新 2

您可以尝试使用 API，看看是否可以让它为您转换图像。

$(function() {
  function postToForm(url) {
    $.post("https://www.askapache.com/online-tools/base64-image-converter/", {
      http_remote_url: url,
      http_compressimage: 1,
      TF_nonce: "4bd57a0b93",
      _wp_http_referer: "/online-tools/base64-image-converter/",
      aatoolstoken: "1fe4rpn"
    }, function(resp) {
      console.log(resp);
    });
  }

  var imgUrl = $("#imgdiv > img").attr("src");
  console.log("Img Url: " + imgUrl);
  postToForm(imgUrl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imgdiv">
  <img id="img" src="https://firebasestorage.googleapis.com/v0/b/ingrum-id.appspot.com/o/images%2FMartian.jpg?alt=media&token=35aab234-2903-46b2-9a49-e48c100d4e01">
</div>

同样，这可能会遇到 CORS 问题，并且该网站似乎使用令牌来帮助防止滥用其 API。

如果您的网络服务器支持脚本，您可以考虑制作自己的 API，用于将图像 URL 转换为 Base64 数据。