- 获取input type=file的文件
- 将其转为base64 赋值给img 的src
- 将整个img交给canvas重绘,
- 通过canvas的toDataURL方法重新转为base64,
- 将base64赋值给img的src
通过上面的方式真的能压缩图片么? 先看一下vue的测试代码
<template>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="fileChange" :files="filesList" />
<input type="submit" value="form上传头像" id="submit" />
</form>
<h1>压缩前</h1>
<img v-if="oldsrc" class="showImg" :src="oldsrc" />
<h1>压缩后</h1>
<img v-if="imgsrc" class="showImg" :src="imgsrc" />
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
filesList: [],
oldsrc: '',
imgsrc: ''
}
},
methods: {
fileChange (event) {
const res = event.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(res)
reader.onload = () => {
const base64Str = reader.result
this.oldsrc = base64Str
console.log(base64Str)
this.changeImageBase64(base64Str, (url) => {
this.imgsrc = url
})
}
},
changeImageBase64 (url, callback) {
const img = new Image()
img.onload = function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
var originWidth = this.width
var originHeight = this.height
var maxWidth = 500
var maxHeight = 400
var targetWidth = originWidth
var targetHeight = originHeight
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
targetWidth = maxWidth
targetHeight = Math.round(maxWidth * (originHeight / originWidth))
} else {
targetHeight = maxHeight
targetWidth = Math.round(maxHeight * (originWidth / originHeight))
}
}
canvas.width = targetWidth
canvas.height = targetHeight
context.clearRect(0, 0, targetWidth, targetHeight)
context.drawImage(img, 0, 0, targetWidth, targetHeight)
var base64Url = canvas.toDataURL('image/jpeg', 0.92)
callback(base64Url)
}
img.src = url
}
}
}
</script>
结果压缩前 
压缩后 
通过前后对比,发现图片的大小的确减少了很多,可分辨率也变小了。
会不会是因为分辨率变小了,图片的大小才变小的呢?
修改一下代码,不再限制canvas的大小
<template>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="fileChange" :files="filesList" />
<input type="submit" value="form上传头像" id="submit" />
</form>
<h1>压缩前</h1>
<img v-if="oldsrc" class="showImg" :src="oldsrc" />
<h1>压缩后</h1>
<img v-if="imgsrc" class="showImg" :src="imgsrc" />
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
filesList: [],
oldsrc: '',
imgsrc: ''
}
},
methods: {
fileChange (event) {
const res = event.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(res)
reader.onload = () => {
const base64Str = reader.result
this.oldsrc = base64Str
console.log(base64Str)
this.changeImageBase64(base64Str, (url) => {
this.imgsrc = url
})
}
},
changeImageBase64 (url, callback) {
const img = new Image()
img.onload = function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
var originWidth = this.width
var originHeight = this.height
var targetWidth = originWidth
var targetHeight = originHeight
canvas.width = targetWidth
canvas.height = targetHeight
context.clearRect(0, 0, targetWidth, targetHeight)
context.drawImage(img, 0, 0, targetWidth, targetHeight)
var base64Url = canvas.toDataURL('image/jpeg', 0.92)
callback(base64Url)
}
img.src = url
}
}
}
</script>
效果,压缩前  压缩后  发现相同分辨率下,经过canvas变化,图片反而更大了
思考一下,影响图片大小的因数还有哪些, 我发现在canvas.toDataURL(‘image/jpeg’, 0.92)中,第二个参数0.92,下来一查,发现是模糊度,越接近于1,与原图效果越真实,那如果设置成0.5呢
<template>
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="avatar" id="avatar" multiple="multiple" @change="fileChange" :files="filesList" />
<input type="submit" value="form上传头像" id="submit" />
</form>
<h1>压缩前</h1>
<img v-if="oldsrc" class="showImg" :src="oldsrc" />
<h1>压缩后</h1>
<img v-if="imgsrc" class="showImg" :src="imgsrc" />
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
data () {
return {
filesList: [],
oldsrc: '',
imgsrc: ''
}
},
methods: {
fileChange (event) {
const res = event.target.files[0]
const reader = new FileReader()
reader.readAsDataURL(res)
reader.onload = () => {
const base64Str = reader.result
this.oldsrc = base64Str
console.log(base64Str)
this.changeImageBase64(base64Str, (url) => {
this.imgsrc = url
})
}
},
changeImageBase64 (url, callback) {
const img = new Image()
img.onload = function () {
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
var originWidth = this.width
var originHeight = this.height
var targetWidth = originWidth
var targetHeight = originHeight
canvas.width = targetWidth
canvas.height = targetHeight
context.clearRect(0, 0, targetWidth, targetHeight)
context.drawImage(img, 0, 0, targetWidth, targetHeight)
var base64Url = canvas.toDataURL('image/jpeg', 0.5)
callback(base64Url)
}
img.src = url
}
}
}
</script>
接下来试一下效果,压缩前是20.2k  压缩后是 8.3k  虽然这种压缩方式降低了图片的存储大小,但也降低了图片的清晰度。
总结
1.所以通过这种方式并不能真正意义上压缩图片的大小。 2.这种处理图片的意义在于,可以让用户上传的分辨率较大的图片,转为规定分辨率的图片,比如说,头像的分辨率固定是40 * 40,而用户传的图片分辨率是未知,我们可以通过裁剪或者用canvas重绘一个图片。 3. 当然如果是可以牺牲一些清晰度的情况下,用这种方式压缩还是可以的,特别是一些本身就比较小的图片。 4. 如果想要压缩图片,还可以通过ps处理,或者一些线上的网站处理,比如 熊猫压缩 https://tinypng.com/
|