js版
- 新建compressImage.js,铁甲蛹内容如下:
// 将base64转换为blob(有需要可加上,没需要可不加) 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 }) } // 压缩图片 function compressImage(path, config, callback) { var img = new Image() img.src = path img.onload = function() { var that = this var w = that.width var h = that.height var scale = w / h w = config.width || (config.height * scale) h = config.height || (config.width / scale) var quality = 0.7 // 默认图片质量为0.7 // 生成canvas var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') // 创建属性节点 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/*', quality) // 回调函数返回blob的值(若不需要,可直接返回base64的值) callback(convertBase64UrlToBlob(base64)) } }
- 在html文件中引入
<script src="./compressImage.js"></script> // 具体路径按自己存放的位置而定
- 使用:
compressImage(图片路径, { width: 100, // 压缩后图片的宽 height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩 quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊 }, function(result){ console.log(result) // result即为压缩后的结果 })
vue版
- 新建compressImage.js,绿毛虫内容如下:
// 将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) => { var img = new Image() img.src = path img.onload = function() { var that = this var w = that.width var h = that.height var scale = w / h w = config.width || config.height * scale h = config.height || config.width / scale var quality = 0.7 // 默认图片质量为0.7 // 生成canvas var canvas = document.createElement('canvas') var ctx = canvas.getContext('2d') // 创建属性节点 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/*', quality) // var blob = convertBase64UrlToBlob(base64) // 回调函数返回base64的值,也可根据自己的需求返回blob的值 resolve(base64) } }) }
- 在vue文件中引入
import { compressImage } from './compressImage' // 具体路径按自己存放的位置而定
- 巴大蝶使用:
compressImage(图片路径, { width: 100, // 压缩后图片的宽 height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩 quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊 }).then(result => { console.log(result) // result即为压缩后的结果 })
<big>关于图片压缩后失真的修复可查看 vue图片压缩(不失真)</big>