前端使用canvas图片压缩
在上传图片时，可能会由于图片过大导致上传速度变慢或者占用服务器内存，此时需要在上传之前将图片进行压缩，此处我是在前端进行处理的，使用的是canvas将图片进行重构，之后把base64格式的图片再转为一个file文件，最后在上传的时候转为formdata格式。
下面主要是图片由base64格式转为一个file文件，以及使用canvas压缩的方法，仅供参考。
将base64转换为文件
dataURLtoFile(dataurl, filename) {
var arr = dataurl.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 File([u8arr], filename, { type: mime })
},
【小知识|前端使用canvas图片压缩】图片经过canvas压缩
let fileCon = null
// 大于300K图片都缩小像素上传
if (file.file.size > 300 * 1024) {
// 创建Canvas对象(画布)
let canvas = document.createElement('canvas')
// 获取对应的CanvasRenderingContext2D对象(画笔)
let context = canvas.getContext('2d')
// 创建新的图片对象
let img = new Image()
// 指定图片的DataURL(图片的base64编码数据)
img.src = https://www.it610.com/article/file.content
// 监听浏览器加载图片完成，然后进行进行绘制
img.onload = () => {
setTimeout(() => {}, 100)
// 指定canvas画布大小，该大小为最后生成图片的大小
canvas.width = img.width
canvas.height = img.height
/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。 */
context.drawImage(img, 0, 0, img.width, img.height)
/* 添加水印 */
if (canvas.width < 2000) {
context.font = 80 + 'px Arial'
} else {
context.font = 250 + 'px Arial'
}context.fillStyle = 'rgba(252,255,255,0.8)'
/* 文字靠右显示 */
context.textAlign = 'right'
context.fillText(
moment().format('YYYY-MM-DD HH:mm:ss'),
canvas.width - 50,
canvas.height - 100
)
// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
// file.content = canvas.toDataURL(file.file.type, 0.2)
fileCon = canvas.toDataURL(file.file.type, 0.2)
let files = this.dataURLtoFile(fileCon, file.file.name)
// 最后将base64编码的图片保存到数组中，留待上传。
this.beforeFile.push(files)
}
}
