// 通過canvas壓縮圖片
canvasCompress(file) {
var reader = new FileReader()
var img = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
console.log('讀取完成', e)
img.src = this.result
}
var width = 480 // 圖像大小
var quality = 0.7 // 圖像質(zhì)量
var canvas = document.createElement('canvas')
var drawer = canvas.getContext('2d')
var base64
img.onload = function() {
canvas.width = width
canvas.height = width * (img.height / img.width)
drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
base64 = canvas.toDataURL('image/jpeg', quality)
console.log('壓縮后', base64)
}
},
前端js 通過canvas壓縮圖片
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 代碼來源于廖雪峰博客,是最實(shí)用的,也是最簡(jiǎn)潔的,但有個(gè)問題就是圖片過小,‘壓縮’后會(huì)更大,這個(gè)區(qū)間大概是1.5M以...
- gulp配置前端資源自動(dòng)化 -- less編譯 js壓縮 圖片壓縮 1.package.json 文件 2.gul...
- image-compressor 一個(gè)簡(jiǎn)單的JavaScript圖像壓縮器。使用瀏覽器的原生canvas.toBl...
- gulp 是一款 nodejs 應(yīng)用,用于前端開發(fā)過程中對(duì)代碼進(jìn)行構(gòu)建,是自動(dòng)化項(xiàng)目的構(gòu)建利器。她不僅能對(duì)網(wǎng)站資源...
- A、CSS壓縮 1、安裝Nodejs 2、全局安裝gulp 3、在項(xiàng)目目錄下安裝gulp 4、配置package....