當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue图片压缩不失真_vue图片压缩(不失真)

發(fā)布時(shí)間：2023/12/14 vue 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue图片压缩不失真_vue图片压缩(不失真) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.在index.html中引入mobileBUGFix.min.js

// mobileBUGFix.min.js內(nèi)容見最下面附件

2.在build/webpack.base.conf.js文件中增加：

module.exports = {

externals: {

'MegaPixImage': 'MegaPixImage',

'JPEGEncoder': 'JPEGEncoder'

}

3.新建compressImage.js，內(nèi)容如下：

import MegaPixImage from 'MegaPixImage'

import JPEGEncoder from 'JPEGEncoder'

// 將base64轉(zhuǎn)換為blob

export function convertBase64UrlToBlob(urlData) {

var arr = urlData.split(',')

var mime = arr[0].match(/:(.*?);/)[1]

var bstr = atob(arr[1])

var n = bstr.length

var u8arr = new Uint8Array(n)

while (n--) {

u8arr[n] = bstr.charCodeAt(n)

}

return new Blob([u8arr], { type: mime })

}

// 壓縮圖片

export function compressImage(path, config) {

return new Promise((resolve, reject) => {

// 生成canvas

var canvas = document.createElement('canvas')

var ctx = canvas.getContext('2d')

var img = new Image()

img.crossOrigin = 'Anonymous'

img.onload = function() {

var that = this

var w = that.width

var h = that.height

var scale = w / h

w = config.width || config.height * scale || w

h = config.height || config.width / scale || h

// 最大寬高如有限制時(shí)的處理

w = config.maxWidth && w > config.maxWidth ? config.maxWidth : w

h = config.maxHeight && h > config.maxHeight ? config.maxHeight : h

w = Math.min(w, h * scale) || w

h = Math.min(h, w / scale) || h

var quality = 0.7 // 默認(rèn)圖片質(zhì)量為0.7

// 創(chuàng)建屬性節(jié)點(diǎn)

var anw = document.createAttribute('width')

anw.nodeValue = w

var anh = document.createAttribute('height')

anh.nodeValue = h

canvas.setAttributeNode(anw)

canvas.setAttributeNode(anh)

ctx.drawImage(that, 0, 0, w, h)

if (config.quality && config.quality <= 1 && config.quality > 0) {

quality = config.quality

}

var base64 = canvas.toDataURL('image/jpeg', quality)

// 在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略。

// 修復(fù)IOS

if (navigator.userAgent.match(/iphone/i)) {

var mpImg = new MegaPixImage(img)

mpImg.render(canvas, {

maxWidth: w,

maxHeight: h,

quality: quality

})

base64 = canvas.toDataURL('image/jpeg', quality)

}

// 修復(fù)android

if (navigator.userAgent.match(/Android/i)) {

var encoder = new JPEGEncoder()

base64 = encoder.encode(ctx.getImageData(0, 0, w, h), quality * 100)

}

// var blob = convertBase64UrlToBlob(base64)

// 回調(diào)函數(shù)返回base64的值，也可根據(jù)自己的需求返回blob的值

// base64 = base64.substr(base64.indexOf(',') + 1)

// 去掉base64前面的部分

resolve(base64)

canvas = null

}

img.src = path

})

}

4.使用

// 引入

import { compressImage } from './compressImage' // 具體路徑按自己存放的位置而定

// 調(diào)用

compressImage(圖片路徑, {

maxWidth: 1920, // 限制最大寬度

maxHeight: 1080, // 限制最大高度，若寬高都限制了，按原圖比例最小邊為主

width: 100, // 壓縮后圖片的寬

height: 200, // 壓縮后圖片的高，寬高若只傳一個(gè)，則按圖片原比例進(jìn)行壓縮

quality: 0.8 // 壓縮后圖片的清晰度，取值0-1，值越小，所繪制出的圖像越模糊

}).then(result => {

console.log(result) // result即為壓縮后的結(jié)果

})

附件：

mobileBUGFix.min.js

/* jpeg_encoder_basic.js for android jpeg壓縮質(zhì)量修復(fù) */

/* megapix-image.js for IOS(iphone5+) drawImage畫面扭曲修復(fù) */

總結(jié)

以上是生活随笔為你收集整理的vue图片压缩不失真_vue图片压缩(不失真)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：项目依赖包文件生成requirement
下一篇：如何在工作中提升自己的学习能力

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

vue

vue图片压缩不失真_vue图片压缩(不失真)

總結(jié)