js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法
更新時間：2017年08月31日 15:50:15 作者：AaronHuang
本篇文章主要介紹了js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法，非常具有實用價值，需要的朋友可以參考下
整理文檔，搜刮出一個js實現(xiàn)canvas保存圖片為png格式并下載到本地的方法，稍微整理精簡一下做下分享。
1.canvas 保存圖片
2.下載到本地
function base64Img2Blob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = base64Img2Blob(content); //new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后兩個參數(shù)在FF下會報錯
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
downloadFile('ship.png', canvas.toDataURL("image/png"));
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js tab欄切換代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
TypeScript 中的 .d.ts 文件詳解(加強類型支持提升開發(fā)效率)
.d.ts 文件在 TypeScript 開發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強大的類型系統(tǒng)帶來的優(yōu)勢,提高代碼質(zhì)量和開發(fā)效率,接下來,我們將深入探討如何為 JavaScript 庫和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實踐和注意事項,一起看看吧2023-09-09
平時我們都是使用軟件把圖片轉(zhuǎn)化為字符畫，今天我就用JAVASCRIPT把圖片轉(zhuǎn)化成字符畫，在娛樂中學習一些JS、HTML5、canvas的使用方法。2013-10-10
本篇文章主要是對JS去掉第一個字符和最后一個字符的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
CocosCreator經(jīng)典入門項目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項目之flappybird，詳細說明了制作的每個步驟，還有詳盡的代碼，對CocosCreator感興趣的同學，一定要看一下2021-04-04
這篇文章主要介紹了bootstrap讀書筆記之CSS組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
非常不錯的ymyang 繪圖效果代碼。2009-04-04
Firefox 包含了一個非標準的 JavaScript 擴展，使正則像函數(shù)一樣可調(diào)用。2008-04-04
這篇文章主要介紹了javascript設(shè)計簡單的秒表計時器，該秒表將包括兩個按鈕和一個用于顯示時間的文本框，當單擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文本框顯示經(jīng)過的時間，需要的朋友可以參考下2015-11-11
微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶網(wǎng)絡(luò)狀態(tài),支付等)
這篇文章主要介紹了微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧,隱藏右上角按鈕,獲取用戶網(wǎng)絡(luò)狀態(tài),支付,隱藏下方工具欄等,需要的朋友可以參考下2024-02-02