canvas图像保存
生活随笔
收集整理的這篇文章主要介紹了
canvas图像保存
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
很多時(shí)候繪制完成的圖片需要保存，那么我們就可以使用到Canvas API來完成這最后一步！
Canvas API使用toDataURL方法把繪畫的狀態(tài)輸出到一個(gè)data URL中然后重新裝載，然后我們就可以把重新裝載后的文件直接保存。
Canvas API保存文件的原理實(shí)際上就是把我們繪畫的狀態(tài)動態(tài)輸出到一個(gè)data URL地址所指向的數(shù)據(jù)中的過程。
什么是data URL？
data URL實(shí)際上就是base64位編碼的URL，主要用于小型的，可以在網(wǎng)頁中直接嵌入，而不需要從外部嵌入數(shù)據(jù)，比如img元素里面的圖像。
data URL的格式“data:image/jpeg;base64,/9j/....”
toDataURL的使用方法
canvas。toDataURL(type);
這個(gè)方法使用一個(gè)參數(shù)type，表示輸出數(shù)據(jù)的MIME類型。
什么是MIME類型：
jpg image/jpeg
?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>canvas圖像保存</title><script src="js/canvas.js" type="text/javascript" charset="utf-8"></script></head><body onload="draw('canvas')"><canvas id="canvas" width="400" height="300"></canvas> </body> </html>?
function draw(id){var canvas = document.getElementById(id);var context = canvas.getContext('2d');context.fillStyle = "green";context.fillRect(0,0,400,300);window.location = canvas.toDataURL('images/jpeg'); }?
轉(zhuǎn)載于:https://www.cnblogs.com/Harold-Hua/p/4721720.html
總結(jié)
以上是生活随笔為你收集整理的canvas图像保存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4.android.mk编写规范
- 下一篇： CodeForces - 570E(dp