H5 上传图片的前端 利用 canvas 压缩图片
2021-03-02 11:27
标签：compress tee 输出 通过 地图 lse 出图 wim 服务 H5 上传图片的前端 利用 canvas 压缩图片 标签：compress tee 输出 通过 地图 lse 出图 wim 服务 原文地址：https://www.cnblogs.com/ygrzzttzjzzzszz/p/14345926.htmlH5 通过 input 获取本地图片后上传服务器是，图片大小会极大的耗费网络，和服务器资源，所以此时我们就要对上传的图片进行压缩后上传
compress(file) {
if (file.file && (file.file.size > 1024*1024*.3)){ // 设置文件压缩的阈值
let image = new Image()
image.src = file.url
image.onload = function () {
let that = this
let w = that.width, // 图片的宽
h = that.height // 图片的长
if (w > 1000 || h > 1000){ // 压缩图片时最长的一条边长是多少，通过计算获取该图片等比例缩放时另一条边的长度
if (w >= h){
h = parseInt(1000 * h / w)
w = 1000
}else {
w = parseInt(1000 * w / h)
h = 1000
}
}
let canvas = document.createElement(‘canvas‘)
let ctx = canvas.getContext(‘2d‘)
canvas.width = w
canvas.height = h
ctx.drawImage(that, 0, 0, w, h)
let base64 = canvas.toDataURL(‘image/jpeg‘, .75) // 设置输出图片的质量
}
}
}
上一篇：原生js也可以自定义组件
下一篇：webp图像格式
文章标题：H5 上传图片的前端 利用 canvas 压缩图片
文章链接：http://soscw.com/index.php/essay/59012.html