export canvas to image

เมื่อวานกลุ่ม Creative Hacker ได้มีโอกาสไปนั่งคุยกันเรื่อง HTML5. ประเด็นหนึ่งที่ผมสนใจติดตามต่อ ก็คือเรื่องที่เราสามารถ export canvas ของเราออกมาเป็น Image ได้เลย

สิ่งที่สงสัยก็คือ, image ที่มัน export ออกมามันอยู่ในรูปแบบอะไร. กลับมาบ้านก็เลยใช้ chrome ช่วยเฉลย

$('#canvas')[0].toDataURL('image/png')

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkCAYAA..."

Update 2010-08-08 10:03

ใน firefox ถ้าต้องการให้ save ลงเป็น file เลยให้ทำดังนี้

var data = $('#canvas')[0].toDataURL('image/png');
data.replace('image/png', 'image/octet-stream');
document.location.href=data;