html5使用canvas實(shí)現(xiàn)圖片下載功能的示例代碼
發(fā)布時(shí)間：2017-08-26 17:18:26 作者：hczhi88 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html5使用canvas實(shí)現(xiàn)圖片下載功能的示例代碼,非常具有實(shí)用價(jià)值，需要的朋友可以參考下
最近項(xiàng)目中需要實(shí)現(xiàn)一個(gè)下載圖片的功能(如下圖)
一開始考慮使用a標(biāo)簽的download屬性進(jìn)行下載：
<a href="圖片src" download="下載海報(bào)"> 下載海報(bào) </a>
但是通過測試，發(fā)現(xiàn)再safari中，下載的文件不能帶上拓展名，所以只好換一個(gè)思路，使用canvas進(jìn)行處理。
1.圖片需要添加crossOrigin='anonymous'設(shè)置圖像的跨域?qū)傩?/p>
img.crossOrigin = 'anonymous';
2.使用toDataURL把圖片轉(zhuǎn)換成base64格式
canvas.toDataURL("image/png")
3.使用模擬點(diǎn)擊事件，觸發(fā)下載
var save_link = document.createElement('a');
save_link.href = image;
save_link.download ='測試.png';
var clickevent = document.createEvent('MouseEvents');
clickevent.initEvent('click', true, false);
save_link.dispatchEvent(clickevent);
完整代碼：
var canvas = $('.canvas');
var cxt = canvas[0].getContext("2d");
function save(){
var img = new Image();
img.crossOrigin = 'anonymous';
img.onload = function(){
var _w = img.naturalWidth;
var _h = img.naturalHeight;
canvas.attr({width:_w,height:_h});
cxt.drawImage(img,0,0);
var image = canvas[0].toDataURL("image/png")
var save_link = document.createElement('a');
save_link.href = image;
save_link.download ='測試.png';
var clickevent = document.createEvent('MouseEvents');
clickevent.initEvent('click', true, false);
save_link.dispatchEvent(clickevent);
};
img.src = 'http://n.sinaimg.cn/sports/transform/20170825/NZI3- fykiufe6650492.jpg';
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了html5教你做炫酷的碎片式圖片切換 (canvas) ，具有一定參考價(jià)值，有興趣的可以了解一下2017-07-28- 下面小編就為大家?guī)硪黄綡TML5】Canvas繪制簡單圖片教程。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-13
詳解如何用HTML5 Canvas API控制圖片的縮放變換
這篇文章主要介紹了用HTML5 Canvas API控制圖片的縮放變換的教程,其中復(fù)雜的地方是如何編寫JavaScript讓鼠標(biāo)成為放大或者縮小的中心,需要的朋友可以參考下2016-03-22詳解通過HTML5 Canvas實(shí)現(xiàn)圖片的平移及旋轉(zhuǎn)變化的方法
這篇文章主要介紹了通過HTML5 Canvas實(shí)現(xiàn)圖片的平移及旋轉(zhuǎn)變化的方法,其中旋轉(zhuǎn)講解的是配合平移坐標(biāo)系確定圓心位置而進(jìn)行的順時(shí)針旋轉(zhuǎn),需要的朋友可以參考下2016-03-22- 這篇文章主要介紹了使用HTML5 Canvas為圖片填充顏色和紋理的教程,包括顏色漸變的填充效果等,需要的朋友可以參考下2016-03-21
- 這篇文章主要介紹了HTML5 Canvas繪制文本及圖片的基礎(chǔ)教程, 通過Canvas我們就可以用JavaScript制作出程序代碼可以輕松控制的文本和圖片數(shù)據(jù),需要的朋友可以參考下2016-03-14
html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了html5 canvas移動(dòng)瀏覽器上實(shí)現(xiàn)圖片壓縮上傳的相關(guān)方法，提出了解決方法，分享了解決問題的思路，感興趣的小伙伴們可以參考一下2016-03-11HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例
這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的代碼示例,充分利用到了坐標(biāo)的操作,說明都寫在代碼注釋里了很簡明,需要的朋友可以參考下2016-02-28- 這篇文章主要介紹了html5使用canvas繪制一張圖片,需要的朋友可以參考下2014-12-15
使用 HTML5 Canvas 制作水波紋效果點(diǎn)擊圖片就會(huì)觸發(fā)
這篇文章會(huì)介紹使用 JavaScript 實(shí)現(xiàn)水波紋效果。水波效果以圖片為背景，點(diǎn)擊圖片任意位置都會(huì)觸發(fā)，附源碼下載，喜歡的朋友可以參考下2014-09-15
