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

Paul Lewis

องค์ประกอบ 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 ด้วย