Lấy url dữ liệu hình ảnh trong JavaScript?

Tôi có một trang HTML thông thường với một số hình ảnh (chỉ các <img />thẻ HTML thông thường ). Tôi muốn có được nội dung của họ, tốt nhất là mã hóa 64, mà không cần tải lại hình ảnh (tức là nó đã được trình duyệt tải, vì vậy bây giờ tôi muốn nội dung).

Tôi muốn đạt được điều đó với Greasemonkey và Firefox.

Lưu ý: Điều này chỉ hoạt động nếu hình ảnh từ cùng một tên miền với trang hoặc có crossOrigin="anonymous"thuộc tính và máy chủ hỗ trợ CORS. Nó cũng sẽ không cung cấp cho bạn tệp gốc mà là phiên bản được mã hóa lại. Nếu bạn cần kết quả giống hệt với bản gốc, hãy xem câu trả lời của Kaiido .

Bạn sẽ cần tạo một thành phần canvas với kích thước chính xác và sao chép dữ liệu hình ảnh với drawImagechức năng. Sau đó, bạn có thể sử dụng toDataURLchức năng để lấy dữ liệu: url có hình ảnh được mã hóa cơ sở 64. Lưu ý rằng hình ảnh phải được tải đầy đủ, hoặc bạn sẽ chỉ nhận lại được một hình ảnh trống (đen, trong suốt).

Nó sẽ là một cái gì đó như thế này. Tôi chưa bao giờ viết tập lệnh Greasemonkey, vì vậy bạn có thể cần điều chỉnh mã để chạy trong môi trường đó.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Bắt hình ảnh có định dạng JPEG không hoạt động trên các phiên bản cũ hơn (khoảng 3,5) của Firefox, vì vậy nếu bạn muốn hỗ trợ điều đó, bạn sẽ cần kiểm tra tính tương thích. Nếu mã hóa không được hỗ trợ, nó sẽ mặc định là "image / png".

Hàm này lấy URL sau đó trả về hình ảnh BASE64

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

Gọi nó như thế này: getBase64FromImageUrl("images/slbltxt.png")

Đến rất lâu sau đó, nhưng không có câu trả lời nào ở đây là hoàn toàn chính xác.

Khi được vẽ trên một khung vẽ, hình ảnh đã qua không bị nén + tất cả được nhân lên trước.
Khi được xuất, nó không được nén hoặc nén lại với một thuật toán khác và không được nhân lên.

Tất cả các trình duyệt và thiết bị sẽ có các lỗi làm tròn khác nhau xảy ra trong quy trình này
(xem Dấu vân tay Canvas ).

Vì vậy, nếu ai đó muốn có một phiên bản cơ sở64 của một tệp hình ảnh, họ phải yêu cầu lại nó (phần lớn thời gian nó sẽ đến từ bộ đệm) nhưng lần này là một Blob.

Sau đó, bạn có thể sử dụng FileReader để đọc nó dưới dạng ArrayBuffer hoặc dưới dạng dataURL.

function toDataURL(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open('get', url);
    xhr.responseType = 'blob';
    xhr.onload = function(){
      var fr = new FileReader();
    
      fr.onload = function(){
        callback(this.result);
      };
    
      fr.readAsDataURL(xhr.response); // async call
    };
    
    xhr.send();
}

toDataURL(myImage.src, function(dataURL){
  result.src = dataURL;

  // now just to show that passing to a canvas doesn't hold the same results
  var canvas = document.createElement('canvas');
  canvas.width = myImage.naturalWidth;
  canvas.height = myImage.naturalHeight;
  canvas.getContext('2d').drawImage(myImage, 0,0);

  console.log(canvas.toDataURL() === dataURL); // false - not same data
  });

<img id="myImage" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png" crossOrigin="anonymous">
<img id="result">

Một phiên bản hiện đại hơn của câu trả lời của kaiido bằng cách sử dụng fetch sẽ là:

function toObjectUrl(url) {
  return fetch(url)
      .then((response)=> {
        return response.blob();
      })
      .then(blob=> {
        return URL.createObjectURL(blob);
      });
}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Chỉnh sửa: Như đã nêu trong các nhận xét, điều này sẽ trả về một url đối tượng trỏ đến một tệp trong hệ thống cục bộ của bạn thay vì DataURL thực tế, do đó tùy thuộc vào trường hợp sử dụng của bạn, đây có thể không phải là thứ bạn cần.

Bạn có thể xem câu trả lời sau để sử dụng tìm nạp và dữ liệu thực tếURL: https://stackoverflow.com/a/50463054/599602

shiv / shim / giả

Nếu (các) hình ảnh của bạn đã được tải (hoặc không), "công cụ" này có thể có ích:

Object.defineProperty
(
    HTMLImageElement.prototype,'toDataURL',
    {enumerable:false,configurable:false,writable:false,value:function(m,q)
    {
        let c=document.createElement('canvas');
        c.width=this.naturalWidth; c.height=this.naturalHeight;
        c.getContext('2d').drawImage(this,0,0); return c.toDataURL(m,q);
    }}
);

.. nhưng tại sao?

Điều này có lợi thế là sử dụng dữ liệu hình ảnh "đã được tải", do đó không cần thêm yêu cầu. Aditionally nó cho phép người dùng cuối (lập trình viên như bạn) quyết định CORS và / hoặc mime-typevà quality-HOẶC- bạn có thể bỏ qua những lập luận / thông số như mô tả trong MDN đặc điểm kỹ thuật ở đây .

Nếu bạn đã tải mã JS này (trước khi cần), thì việc chuyển đổi sang dataURLđơn giản như:

ví dụ

<img src="/yo.jpg" onload="console.log(this.toDataURL('image/jpeg'))">

console.log(document.getElementById("someImgID").toDataURL());

Dấu vân tay GPU

Nếu bạn lo lắng về "tính chính xác" của các bit thì bạn có thể thay đổi công cụ này cho phù hợp với nhu cầu của bạn như được cung cấp bởi câu trả lời của @ Kaiido.

Sử dụng onloadsự kiện để chuyển đổi hình ảnh sau khi tải

function loaded(img) {
  let c = document.createElement('canvas')
  c.getContext('2d').drawImage(img, 0, 0)
  msg.innerText= c.toDataURL();
}

pre { word-wrap: break-word; width: 500px; white-space: pre-wrap; }

<img onload="loaded(this)" src="https://cors-anywhere.herokuapp.com/http://lorempixel.com/200/140" crossorigin="anonymous"/>

<pre id="msg"></pre>

Trong HTML5, sử dụng tốt hơn điều này:

{
//...
canvas.width = img.naturalWidth; //img.width;
canvas.height = img.naturalHeight; //img.height;
//...
}