js實(shí)現(xiàn)canvas保存圖片為png格式并下載到本地的方法
整理文檔,搜刮出一個(gè)js實(shí)現(xiàn)canvas保存圖片為png格式并下載到本地的方法,稍微整理精簡(jiǎn)一下做下分享。
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"));
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
TypeScript 中的 .d.ts 文件詳解(加強(qiáng)類(lèi)型支持提升開(kāi)發(fā)效率)
.d.ts 文件在 TypeScript 開(kāi)發(fā)中扮演著非常重要的角色,它們讓我們能夠享受到 TypeScript 強(qiáng)大的類(lèi)型系統(tǒng)帶來(lái)的優(yōu)勢(shì),提高代碼質(zhì)量和開(kāi)發(fā)效率,接下來(lái),我們將深入探討如何為 JavaScript 庫(kù)和自定義模塊創(chuàng)建 .d.ts 文件,以及一些最佳實(shí)踐和注意事項(xiàng),一起看看吧2023-09-09通過(guò)javascript把圖片轉(zhuǎn)化為字符畫(huà)
平時(shí)我們都是使用軟件把圖片轉(zhuǎn)化為字符畫(huà),今天我就用JAVASCRIPT把圖片轉(zhuǎn)化成字符畫(huà),在娛樂(lè)中學(xué)習(xí)一些JS、HTML5、canvas的使用方法。2013-10-10JS去掉第一個(gè)字符和最后一個(gè)字符的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS去掉第一個(gè)字符和最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02CocosCreator經(jīng)典入門(mén)項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門(mén)項(xiàng)目之flappybird,詳細(xì)說(shuō)明了制作的每個(gè)步驟,還有詳盡的代碼,對(duì)CocosCreator感興趣的同學(xué),一定要看一下2021-04-04javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器
這篇文章主要介紹了javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器,該秒表將包括兩個(gè)按鈕和一個(gè)用于顯示時(shí)間的文本框,當(dāng)單擊開(kāi)始按鈕時(shí)開(kāi)始計(jì)時(shí),最小單位為0.01秒,此時(shí)再次單擊按鈕則停止計(jì)時(shí),文本框顯示經(jīng)過(guò)的時(shí)間,需要的朋友可以參考下2015-11-11微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧(隱藏右上角按鈕,獲取用戶(hù)網(wǎng)絡(luò)狀態(tài),支付等)
這篇文章主要介紹了微信內(nèi)置瀏覽器WeixinJSBridge的使用技巧,隱藏右上角按鈕,獲取用戶(hù)網(wǎng)絡(luò)狀態(tài),支付,隱藏下方工具欄等,需要的朋友可以參考下2024-02-02