#yyds干货盘点#前端canvas图片压缩

村上春种树 lv.2

发布时间：2023-11-28 02:52:00 167

图片压缩算法

通过canvasAPI进行在Web端上传的时候进行图片压缩。

通过宽高压缩（第一次压缩 - Canvas宽高）
通过API压缩（第二次压缩 - HTMLCanvasDom.toDataURL()）

简述步骤

通过input输入框用来坐上传，通过chang事件获得上传的文件。
对上传的文件进行一些简单的类型，大小的判断然后开始压缩。
压缩图片第一步将用户上传的图片(file)转为base64格式-new FileReader() -> ReaderAsDataUrl()异步读取 -> load事件读取完成获取base64
计算压缩图片宽高（等比例），创建Canvas画布赋值新的宽高。（第一次压缩尺寸）然后将canvasDom进行隐藏，挂载到dom节点上。
getContext('2d')获得canvas对象，调用drawImage方法进行绘制。
然后通过CanvasHTMLDOM调用toDataURL方法将整个canvas画布输出成base64格式。（第二次压缩）
删除CanvasDOM，然后将压缩后的base64通过callback传入到服务端中就可以了。

Tips

  通过change事件进行异步完成监听
  new FileReader() -> reader.readAsDataURL(file) 读取上传文件 => reader.result获得base64格式的上传图片
  压缩对宽度和高度进行压缩 naturalWidth/naturalHeihgt   HTML5属性获得源生图片高度宽度
  创建Canvas标签赋值压缩后的宽高
  隐藏使用visibility-hidden 仅仅是样式隐藏。因为visibility属性隐藏可以获取DOM
  ctx.clearReact() ->   每次重新上传文件要清除Canvas画布，防止图片覆盖。
  ctx.drawImage()通过canvas绘制对应文件。
  HTMLCanvasDOM.toDataUrl()
  将canvas画布转化成base64格式同时进行压缩，得到返回值。
  压缩成功，使用callback传入新的Data URL进行向后台发送逻辑请求。

代码演示





    
    
    canvas图片压缩算法

文章来源： https://blog.51cto.com/u_11365839/5854494

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。