當前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時間：2023/12/14 vue 51 豆豆

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

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

// mobileBUGFix.min.js內容見最下面附件

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

module.exports = {

externals: {

'MegaPixImage': 'MegaPixImage',

'JPEGEncoder': 'JPEGEncoder'

}

3.新建compressImage.js，內容如下：

import MegaPixImage from 'MegaPixImage'

import JPEGEncoder from 'JPEGEncoder'

// 將base64轉換為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

// 最大寬高如有限制時的處理

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 // 默認圖片質量為0.7

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

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ū)間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 0.92。其他參數會被忽略。

// 修復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)

}

// 修復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)

// 回調函數返回base64的值，也可根據自己的需求返回blob的值

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

// 去掉base64前面的部分

resolve(base64)

canvas = null

}

img.src = path

})

}

4.使用

// 引入

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

// 調用

compressImage(圖片路徑, {

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

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

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

height: 200, // 壓縮后圖片的高，寬高若只傳一個，則按圖片原比例進行壓縮

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

}).then(result => {

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

})

附件：

mobileBUGFix.min.js

/* jpeg_encoder_basic.js for android jpeg壓縮質量修復 */

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：项目依赖包文件生成requirement
下一篇： Vue引入CreateJS

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

vue

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

總結