เพิ่มการรองรับ Canvas toBlob() ใน Chrome 50
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
องค์ประกอบ 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 ด้วย
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2016-03-14 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2016-03-14 UTC"],[],[]]