เพิ่มการรองรับ Canvas toBlob() ใน Chrome 50

องค์ประกอบ Canvas ได้รับการอัปเกรดใน Chrome 50 แล้ว ตอนนี้รองรับเมธอด toBlob() แล้ว นี่เป็นข่าวดีสําหรับทุกคนที่สร้างรูปภาพฝั่งไคลเอ็นต์ ซึ่งต้องการอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์หรือจัดเก็บไว้ใน IndexedDB เพื่อใช้ในอนาคต

function sendImageToServer (canvas, url) {

   
function onBlob (blob) {
   
var request = new XMLHttpRequest();
    request
.open('POST', url);
    request
.onload = function (evt) {
       
// Blob sent to server.
   
}

    request
.send(blob);
   
}

    canvas
.toBlob(onBlob);
}

การใช้ toBlob() นั้นยอดเยี่ยมมาก เนื่องจากตอนนี้คุณสามารถทำงานกับข้อมูลไบนารีที่เข้ารหัสโดยตรงแทนที่จะจัดการสตริงที่เข้ารหัส Base64 ที่ได้รับจาก toDataURL() ไฟล์นี้มีขนาดเล็กกว่าและมีแนวโน้มที่จะเหมาะกับ Use Case มากกว่า URI ของข้อมูล

หากสงสัยว่าจะวาดบล็อกรูปภาพไปยังบริบทของ Canvas อื่นได้ไหม คำตอบคือได้อย่างแน่นอนใน Firefox และ Chrome คุณทําสิ่งนี้ได้โดยใช้ createImageBitmap() API ซึ่งจะเปิดตัวใน Chrome 50 ด้วย