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。

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

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

1 个答案: