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