รับ URL ข้อมูลภาพใน JavaScript?

ฉันมีหน้า HTML ปกติพร้อมภาพบางภาพ (แค่<img />แท็ก HTML ปกติ) ฉันต้องการรับเนื้อหาของพวกเขา base64 เข้ารหัสดีกว่าโดยไม่จำเป็นต้องดาวน์โหลดภาพใหม่ (เช่นเบราว์เซอร์โหลดแล้วดังนั้นตอนนี้ฉันต้องการเนื้อหา)

ฉันชอบที่จะประสบความสำเร็จกับ Greasemonkey และ Firefox

หมายเหตุ:ใช้งานได้เฉพาะเมื่อภาพนั้นมาจากโดเมนเดียวกันกับหน้าเว็บหรือมีcrossOrigin="anonymous"แอตทริบิวต์และเซิร์ฟเวอร์รองรับ CORS มันจะไม่ให้ไฟล์ต้นฉบับกับคุณ แต่เป็นเวอร์ชันที่เข้ารหัสใหม่ หากคุณต้องการผลที่ตามมาจะเป็นเหมือนเดิมให้ดูคำตอบของ Kaiido

คุณจะต้องสร้างองค์ประกอบผ้าใบที่มีขนาดที่ถูกต้องและคัดลอกข้อมูลภาพด้วยdrawImageฟังก์ชั่น จากนั้นคุณสามารถใช้toDataURLฟังก์ชันเพื่อรับข้อมูล: url ที่มีอิมเมจเข้ารหัส -64 โปรดทราบว่าภาพนั้นจะต้องโหลดอย่างสมบูรณ์หรือคุณจะกลับมาเป็นภาพว่างเปล่า (สีดำโปร่งใส)

มันจะเป็นอะไรแบบนี้ ฉันไม่เคยเขียนสคริปต์ Greasemonkey ดังนั้นคุณอาจต้องปรับรหัสเพื่อให้ทำงานในสภาพแวดล้อมนั้น

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,/, "");
}

การรับภาพที่จัดรูปแบบ JPEG ไม่สามารถใช้งานได้กับ Firefox รุ่นเก่า (ประมาณ 3.5) ดังนั้นหากคุณต้องการสนับสนุนคุณจะต้องตรวจสอบความเข้ากันได้ หากไม่รองรับการเข้ารหัสมันจะเริ่มต้นที่ "image / png"

ฟังก์ชันนี้ใช้ URL จากนั้นส่งคืนอิมเมจ 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;
}

เรียกว่าเป็นแบบนี้: getBase64FromImageUrl("images/slbltxt.png")

อีกไม่นานหลังจากนี้ แต่ไม่มีคำตอบใดที่ถูกต้องทั้งหมด

เมื่อวาดบนผืนผ้าใบรูปภาพที่ผ่านจะไม่ถูกบีบอัด + ทั้งหมดถูกคูณด้วย
เมื่อส่งออกจะไม่มีการบีบอัดหรือบีบอัดด้วยอัลกอริทึมที่แตกต่างกันและไม่ถูกคูณ

เบราว์เซอร์และอุปกรณ์ทั้งหมดจะมีข้อผิดพลาดในการปัดเศษที่แตกต่างกันเกิดขึ้นในกระบวนการนี้
(ดูที่ลายนิ้วมือ Canvas )

ดังนั้นหากต้องการไฟล์ภาพรุ่น base64 พวกเขาจะต้องขออีกครั้ง (ส่วนใหญ่จะมาจากแคช) แต่ครั้งนี้เป็น Blob

จากนั้นคุณสามารถใช้FileReaderเพื่ออ่านเป็น ArrayBuffer หรือเป็น 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">

คำตอบของ kaiido ที่ทันสมัยยิ่งขึ้นเมื่อใช้การดึงข้อมูลคือ:

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

แก้ไข: ตามที่ระบุไว้ในความคิดเห็นสิ่งนี้จะส่งคืน URL วัตถุที่ชี้ไปที่ไฟล์ในระบบท้องถิ่นของคุณแทน DataURL จริงดังนั้นขึ้นอยู่กับกรณีการใช้งานของคุณนี่อาจไม่ใช่สิ่งที่คุณต้องการ

คุณสามารถดูคำตอบต่อไปนี้เพื่อใช้การดึงข้อมูลและ dataURL จริง: https://stackoverflow.com/a/50463054/599602

shiv / shim / sham

หากรูปภาพของคุณโหลดแล้ว (หรือไม่) เครื่องมือ "" นี้อาจมีประโยชน์:

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

.. แต่ทำไม

นี่เป็นข้อได้เปรียบของการใช้ข้อมูลภาพที่ "โหลดแล้ว" ดังนั้นจึงไม่จำเป็นต้องมีคำขอพิเศษ Aditionally จะช่วยให้ผู้ใช้ปลายทาง (โปรแกรมเมอร์เช่นคุณ) ตัดสินใจธและ / หรือmime-typeและqualityคัดลอกคุณสามารถออกจากการขัดแย้งเหล่านี้ / พารามิเตอร์ที่อธิบายไว้ในMDNสเปคที่นี่

หากคุณโหลด JS นี้ (ก่อนหน้านี้เมื่อต้องการ) การแปลงdataURLเป็นไฟล์ง่ายๆนั้น:

ตัวอย่าง

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

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

พิมพ์ลายนิ้วมือ GPU

หากคุณกังวลเกี่ยวกับ "ความแม่นยำ" ของบิตคุณสามารถแก้ไขเครื่องมือนี้เพื่อให้เหมาะกับความต้องการของคุณตามคำตอบของ @ Kaiido

ใช้onloadเหตุการณ์เพื่อแปลงภาพหลังจากโหลด

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>

ใน HTML5 ควรใช้สิ่งนี้:

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