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

Paul Lewis

Twitter หน้าแรก

องค์ประกอบ 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() ตอนนี้คุณสามารถทำงานกับข้อมูลไบนารีที่เข้ารหัสได้โดยตรง ไฟล์นี้มีขนาดเล็กและเหมาะกับกรณีการใช้งานมากกว่า URI ข้อมูล

หากคุณสงสัยว่าคุณสามารถวาด Blob ลงในผืนผ้าใบอื่นๆ ได้หรือไม่ คำตอบคือ ใน Firefox และ Chrome แน่นอน! ซึ่งคุณสามารถทำได้โดยใช้ createImageBitmap() API ซึ่งติดตั้งอยู่ใน Chrome 50 เช่นกัน