Canvas 压缩图片

最新推荐文章于 2024-05-16 11:12:50 发布

小鸭子--

最新推荐文章于 2024-05-16 11:12:50 发布

阅读量271

点赞数

分类专栏： canvas 前端图片压缩文章标签： js javascript vue.js es6 jquery

本文链接：https://blog.csdn.net/sinat_15389075/article/details/107762845

版权

本文介绍了如何使用Canvas进行图片压缩。无论是base64还是file类型的图片，在前端都可以通过Canvas进行压缩，最后通常将压缩后的图片以file形式发送给后端。压缩原理是先将图片在Canvas上绘制，然后从Canvas获取base64（如果需要）或直接转换为file。

摘要由CSDN通过智能技术生成

1、场景
我们上传图片时，图片如果过大，耗费流量，会要求前端压缩，正常的我们选择好图片时，会拿到这种图片类型，一种是base64,一种是file，我们是不管是那种，最终传给后端的话，一般都会是流，因为base64字符太长了，一般不建议使用。

原理就是拿到图片绘制在canvas上，然后canvas转换为base64的图片（如果需要base64，后面不用再转为file），然后在转换成file返回

第一种，file压缩之后为file

/**
 * 图片压缩
 */
export function picReduce({
  file=null,
  cb = null,
}) {


  if(file){

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
  // 先new一个img和fileReader的实例
  const img = new Image()
  const reader = new FileReader()// 读取文件资源
  reader.readAsDataURL(file) 
  let maxWidth = 1024  //img.naturalWidth/5
  let maxHeight = 768 //img.naturalHeight/5
  
  reader.onload = function(e){ 
   console.log(e)
   img.src = e.target.result
   
    img.onload = function () { //一定的加这句话，不然上传较慢的话，是获取不到图片的大小的&#x