具體方法有兩種 一種是 利用canvas的 toDataUrl 和Html5 里面的 <a>標簽里面的 Download 屬性
雖然 Download 的兼容性不怎么樣 但是在文章后面給大家說說怎么兼容IE
如果你用cnavas 畫了一張很是完美的照片 你想着把它保存下來
你點了圖片 右擊 =》圖片另存為 （還可以改名字）
以上操作的確是 沒毛病對吧 但是 總感覺有點不爽是吧 要的就是一單擊就可以下載
HTML 部分：
<!--創建一個cavas 用來存放圖片--> <canvas id="cavasimg" width="607" height="367" ></canvas> <!-- 聲明一個按鈕 用來觸發下載圖片到本地--> <input type="button" id="btnsavaImg" value="保存圖片到本地" onclick="Download()"/>
function Download(){ //cavas 保存圖片到本地 js 實現 //------------------------------------------------------------------------ //1.確定圖片的類型 獲取到的圖片格式 data:image/Png;base64,...... var type ='png';//你想要什么圖片格式 就選什么吧 var d=document.getElementById("cavasimg"); var imgdata=d.toDataURL(type); //2.0 將mime-type改為image/octet-stream,強制讓瀏覽器下載 var fixtype=function(type){ type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg'); var r=type.match(/png|jpeg|bmp|gif/)[0]; return 'image/'+r; }; imgdata=imgdata.replace(fixtype(type),'image/octet-stream'); //3.0 將圖片保存到本地 var savaFile=function(data,filename) { var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href=data; save_link.download=filename; var event=document.createEvent('MouseEvents'); event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null); save_link.dispatchEvent(event); }; var filename=''+new Date().getSeconds()+'.'+type; //我想用當前秒是可以解決重名的問題了 不行你就換成毫秒 savaFile(imgdata,filename); };
插入效果吧：
接下來就要用 <a>標簽了
<a href="img/0dd7912397dda144b4b30b41b3b7d0a20df4868e.jpg" download="lumia.jpg"> <img src="img/0dd7912397dda144b4b30b41b3b7d0a20df4868e.jpg" /> </a>
這就不用寫js方法咯 但是會有不兼容的問題 當前好像只支持chrome 和 firefox對於IE 該怎么辦呢？
那就需要 在你頁面的 <head></head> 部分引入這個js文件了
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
務必請放在 head里面 因為要讓瀏覽器在解析頭部后再去解析<body> 那時候就能讓IE 支持該屬性了。