js圖片下載方式集合(附詳細(xì)代碼)
一、文件流格式下載
創(chuàng)建 a
標(biāo)簽下載文件流格式圖片
/** * 創(chuàng)建 <a> 標(biāo)簽下載文件流格式圖片 * @param file * @param fileName */ export const downloadFile = (file: string, fileName?: string) => { const blob = new Blob([file]); const fileReader = new FileReader(); fileReader.readAsDataURL(blob); fileReader.onload = (e) => { const a = document.createElement("a"); a.download = fileName || '0123456.PNG'; a.href = e.target?.result as string; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; }
文件流格式還可以轉(zhuǎn)為Base64格式之后,再以鏈接格式下載
轉(zhuǎn)換方式如下
export const downloadFileUrl = (file: Blob) => { const blob = new Blob([file]); const fileReader = new FileReader(); fileReader.readAsDataURL(blob); fileReader.onload = (e) => { const url = e.target?.result as string; downloadImage(`data:image/png;Base64,${url}`, 'testefd') }; }
二、鏈接格式下載
/** * 根據(jù)圖片路徑下載 * @param imgsrc 圖片路徑 * @param name 下載圖片名稱 * @param type 格式圖片,可選,默認(rèn)png ,可選 png/jpeg */ export const downloadImage = (imgsrc: string, name: string, type: string = 'png') => { let image = new Image(); // 解決跨域 Canvas 污染問(wèn)題 image.setAttribute("crossOrigin", "anonymous"); image.onload = function () { let canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; let context = canvas.getContext("2d"); context?.drawImage(image, 0, 0, image.width, image.height); let url = canvas.toDataURL(`image/${type}`); //得到圖片的base64編碼數(shù)據(jù) let a = document.createElement("a"); // 生成一個(gè)a元素 let event = new MouseEvent("click"); // 創(chuàng)建一個(gè)單擊事件 a.download = name || "pic"; // 設(shè)置圖片名稱 a.href = url; // 將生成的URL設(shè)置為a.href屬性 a.dispatchEvent(event); // 觸發(fā)a的單擊事件 } //將資源鏈接賦值過(guò)去,才能觸發(fā)image.onload 事件 image.src = imgsrc }
總結(jié)
到此這篇關(guān)于js圖片下載方式的文章就介紹到這了,更多相關(guān)js圖片下載方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js以對(duì)象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對(duì)象類型作為鍵值對(duì)的鍵名。2010-07-07使用JS代碼實(shí)現(xiàn)點(diǎn)擊按鈕下載文件
有時(shí)候我們?cè)诰W(wǎng)頁(yè)上需要增加一個(gè)下載按鈕,讓用戶能夠點(diǎn)擊后下載頁(yè)面上的資料,那么怎樣才能實(shí)現(xiàn)功能呢?今天小編給大家分享兩種方法實(shí)現(xiàn)js實(shí)現(xiàn)點(diǎn)擊按鈕下載文件,需要的朋友參考下吧2016-11-11詳解JavaScript數(shù)組reduce()方法的高級(jí)技巧
reduce()?是?JavaScript?中一個(gè)很有用的數(shù)組方法,這篇文章主要介紹了JavaScript中reduce()方法的高級(jí)技巧,感興趣的小伙伴可以了解一下2023-03-03js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單工具欄出現(xiàn)折疊與展開(kāi)效果,涉及javascript鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05javascript 實(shí)現(xiàn)劃詞標(biāo)記劃詞搜索功能
在頁(yè)面中加上這串代碼就行了,同時(shí)還有搜索功能。2009-10-10JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能,涉及javascript針對(duì)頁(yè)面form表單元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-12-12