前端转换图片格式前端将png格式图片转成jpg格式前端用使用canvas转换图片格式

在开发中，遇到这样一个需求。由于我们的照片是要下发到设备上，而我们的设备只支持jpg格式的图片。那么我们不能限制用户只选择jpg图片进行上传，这样用户体验极差。

解决方案：用canvas转换图片的格式

1、把转换的方法单独放在imgTypeChange.js中

imgTypeChange.js文件

// 把image 转换为 canvas对象
function imgToCanvas(image) {
  let canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext("2d").drawImage(image, 0, 0);
  return canvas;
}

//canvas转换为image
function canvasToImg(canvas, type='jpeg') {
    return new Promise((resolve, reject) => {
    canvas.toBlob( (image)=> {
      resolve(image)
    }, `image/${type}`)
  })
}


//获取图片信息
function getImg(fn, file) {
  return new Promise((resolve => {
    const imgFile = new FileReader()
    // 使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src
    imgFile.readAsDataURL(file);
    imgFile.onload = function (e) {
      const image = new Image()
      image.src = e.target.result; //base64数据
      image.onload = async function () {
        resolve(await fn(image))
      }
    }
  }))
}
// 该方法最后拿到的结果是一个File类型的文件
 async function imgTypeChange(file) {
  //获取图片信息
   return await getImg(async function(image) {
    let imgName = file.name.split('.')[0]
    // 把image 转换为 canvas对象
    const can = imgToCanvas(image)
    //canvas转换为Bolb 类型image
    const blobImg = await canvasToImg(can, 'jpeg')
    return new Promise((resolve) => {
      resolve(new File([blobImg], `${imgName}.jpg`, { type: blobImg.type }))
    })
  }, file)
}
export default imgTypeChange

2、在需要的地方引入即可，下面给出我使用的案例

// 导入该方法
import imgTypeChange from '../util/imgTpyeChange'
//* 封装post请求
export async function post(url, data = {}, config = { showLoading: true }, timeout) {
  // url 单独处理上传统一转图片类型
  if(url.includes(`putOneFile`)) {
    //  单张上传图片处理
    let file = data.get('file')
    // 针对不是jpg格式的文件处理为jpg格式的文件
    if(!file.type.includes('image/jpeg')) {
      let myFile = await imgTypeChange(file)
      const formData = new FormData()
      formData.append('file', myFile)
      data = formData
    }
  }else if(url.includes(`put-file`)) {
    //  批量上传图片处理
    const formData = new FormData()
    let arr = data.getAll('file')
    for(let i = 0; i < arr.length; i++) {
      if(!arr[i].type.includes('image/jpeg')) {
        let myFile = await imgTypeChange(arr[i])
        formData.append('file', myFile)
      }else {
        formData.append('file', arr[i])
      }
    }
    data = formData
  }
  return new Promise((resolve, reject) => {
    axios({
            url,
            method: 'post',
            data,
            timeout: timeout ? timeout : 0,
    config
}).then(
    res => {
      console.log('res',res)
      resolve(res.data)
},
  err => {
    reject(err)
  }
)
})
}

原生JS可直接预览版(直接复制保存html文件即可预览转换简易版)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="inputimg">
  <select id="myselect">
    <option value="1">jpeg格式</option>
    <option value="2">webp格式</option>
    <option value="3">png格式</option>
  </select>
  <button id="start">开始转换</button>
  <p>预览：</p>
  <img id="imgShow" src="" alt="">
</body>

<script>
  /*事件*/
  document.getElementById('start').addEventListener('click', function () {
    getImg(function (image) {
      let can = imgToCanvas(image)
      imgshow = document.getElementById("imgShow");
      imgshow.setAttribute('src', canvasToImg(can));
    });
  });
  // 把image 转换为 canvas对象
  function imgToCanvas(image) {
    let canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
  }
  //canvas转换为image
  function canvasToImg(canvas) {
    let array = ["image/jpeg", "image/webp", "image/png"]
    type = document.getElementById('myselect').value - 1;
    console.log(canvas);
    let src = canvas.toDataURL(array[type]);
    // console.log(src);
    return src;
  }
  //获取图片信息
  function getImg(fn) {
    let imgFile = new FileReader();
 	 try {
      // 使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src
      imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
      imgFile.onload = function (e) {
        let image = new Image();
        image.src = e.target.result; //base64数据
        image.onload = function () {
          fn(image);
        }
      }

    } catch (e) {
      console.log("请上传图片！" + e);
    }
  }
</script>
</html>