JavaScript 压缩图片
上传图片时候,遇到要上传很大的图片,上传的时候就会很慢。所以,需要对图片进行压缩处理来优化上传功能。图片压缩函数:/** 图片压缩* img原始图片* width压缩后的宽度* height压缩后的高度* ratio压缩比率*/function compress(img, width, height, ratio) {var canvas, ctx, img64;canvas = document
·
上传图片时候,遇到要上传很大的图片,上传的时候就会很慢。所以,需要对图片进行压缩处理来优化上传功能。
图片压缩函数:
/*
* 图片压缩
* img 原始图片
* width 压缩后的宽度
* height 压缩后的高度
* ratio 压缩比率
*/
function compress(img, width, height, ratio) {
var canvas, ctx, img64;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64;
}
图片压缩函数,返回 base64 格式的图片数据。 其中压缩比率ratio取值(0 - 1 之间),ratio越大图片质量越高。
这里将图片转为 jpeg格式,因为转为 png 格式的话,图片的 base64 比转为 jpeg 的要长不少。
<input type="file" accept="image/*" name="imageFile" @change="upload">
上传图片后 @change绑定的upload 函数将被触发,在这个函数中获取到图片的资源,将它压缩并利用canvas绘制出来。
upload () {
let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型
let reader = new FileReader()
reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
reader.onload = (e) => { // 文件读取完成时触发
let result = e.target.result // base64格式图片地址
var image = new Image()
image.src = result // 设置image的地址为base64的地址
image.onload = () => { // 图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值
let width = image.width // 图片宽度
let height = image.height
let dataUrl = this.compress(image, width, height, 0.7)
document.getElementById("test").src = dataUrl
}
}
}
压缩图片结果对比:
大小对比:
分辨率对比:
压缩2M的图片:
大小对比:
分辨率对比:
demo完整版代码:
<template>
<div>
<input type="file" accept="image/*" name="imageFile" @change="upload">
<img id="test" crossorigin alt="">
</div>
</template>
<script>
export default {
name: '',
data () {
return {
}
},
components: {
},
created () {
},
methods: {
upload () {
let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型
let reader = new FileReader()
reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
reader.onload = (e) => { // 文件读取完成时触发
let result = e.target.result // base64格式图片地址
var image = new Image()
image.src = result // 设置image的地址为base64的地址
image.onload = () => { // 图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值
let width = image.width // 图片宽度
let height = image.height
let dataUrl = this.compress(image, width, height, 0.7)
document.getElementById("test").src = dataUrl
}
}
},
/*
* 图片压缩
* img 原始图片
* width 压缩后的宽度
* height 压缩后的高度
* ratio 压缩比率
*/
compress (img, width, height, ratio) {
let canvas, ctx, img64;
canvas = document.createElement('canvas')
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64;
}
}
}
</script>
<style lang="less" scoped>
</style>
更多推荐
已为社区贡献24条内容
所有评论(0)