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

// 创建属性节点

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 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 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的值，也可根据