JavaScript圖片url地址轉(zhuǎn)base64簡單示例
前言
記錄來自于每一次的實(shí)際需求;
此次需要做的是將拿到的圖片,轉(zhuǎn)png格式下載,看了下數(shù)據(jù)庫返回的地址,有png、svg、jpg格式,我的想法是先通通轉(zhuǎn)base64,再處理成png下載。
一、圖片地址轉(zhuǎn)base64
1、先定義一個(gè)方法
/**
* 根據(jù)圖片的url轉(zhuǎn)換對應(yīng)的base64值
* @param { String } imageUrl 如:http://xxxx/xxx.png
* @returns base64取值
*/
async urlToBase64(imageUrl) {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let img = new Image()
img.crossOrigin = 'Anonymous' // 解決Canvas.toDataURL 圖片跨域問題
img.src = imageUrl
img.onload = function() {
canvas.height = img.height
canvas.width = img.width
ctx.fillStyle = '#fff' // canvas背景填充顏色默認(rèn)為黑色
ctx.fillRect(0,0,img.width,img.height)
ctx.drawImage(img, 0, 0) // 參數(shù)可自定義
const dataURL = canvas.toDataURL('image/jpeg', 1) // 獲取Base64編碼
resolve(dataURL)
canvas = null // 清除canvas元素
img = null // 清除img元素
}
img.onerror = function() {
reject(new Error('Could not load image at ' + imageUrl))
}
})
}2、存儲(chǔ)返回的base64,并轉(zhuǎn)為png格式下載
/**
* 下載圖片的方法
* @param { String } imageUrl 如:http://xxxx/xxx.png
* @returns base64取值
*/
async upload(item) {
// 此處的src 是圖片地址,如: http://xxxx/xxx.png
let { src, name } = item
// 存儲(chǔ)base64的值
let base64 = await this.urlToBase64(src)
let link = document.createElement('a')
link.href = base64
link.download = `${name}.png`
link.click()
}補(bǔ)充知識:
1)將base64圖片格式轉(zhuǎn)為可讀的url格式
將圖片文件轉(zhuǎn)為二進(jìn)制,然后通過URL的createObjectURL函數(shù),將二進(jìn)制轉(zhuǎn)為url格式
function getBase64URL(pic) {
const blob = base64ImgtoFile(pic)
const blobUrl = window.URL.createObjectURL(blob);
return blobUrl
}
2)將圖片轉(zhuǎn)為文件
function base64ImgtoFile (dataurl, filename = 'file') {
//將base64格式分割:['data:image/png;base64','XXXX']
const arr = dataurl.split(',')
// .*? 表示匹配任意字符到下一個(gè)符合條件的字符 剛好匹配到:
// image/png
const mime = arr[0].match(/:(.*?);/)[1] //image/png
//[image,png] 獲取圖片類型后綴
const suffix = mime.split('/')[1] //png
const bstr = atob(arr[1]) //atob() 方法用于解碼使用 base-64 編碼的字符串
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime
})
}總結(jié)
到此這篇關(guān)于JavaScript圖片url地址轉(zhuǎn)base64的文章就介紹到這了,更多相關(guān)JS圖片url地址轉(zhuǎn)base64內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信開發(fā) 使用picker封裝省市區(qū)三級聯(lián)動(dòng)模板
這篇文章主要學(xué)習(xí)微信開發(fā),如何使用picker封裝省市區(qū)三級聯(lián)動(dòng)模板,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
firefox firebug中文入門教程 腳本之家新年特別版
最近看了一篇文章感觸頗深,對于firebug作為腳本之家的編輯經(jīng)常看的到,但可悲的是沒怎么用過,不是不用那個(gè)而是不會(huì)用,剛好看了一篇基礎(chǔ)的文章特別整理下。2010-01-01
JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題(title)的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁標(biāo)題(title)的方法,涉及javascript中document.title方法的使用,需要的朋友可以參考下2015-04-04
JavaScript獲取URL參數(shù)的幾種方法小結(jié)
在Web開發(fā)中,經(jīng)常需要從URL中提取參數(shù)來進(jìn)行相應(yīng)的操作,本文將深度解析在JavaScript中獲取URL參數(shù)的幾種方法,并附帶一些擴(kuò)展與高級技巧,希望對你有所幫助2024-09-09

