前端vue实现图片压缩并且将其转换为jpg格式图片；前端转换图片格式；前端使用js转换图片格式；前端使用canvas将png格式图片转成jpg格式

需求中可能有时需要将png图片转成jpg图片或者格式互转，前端使用js和canvas转换图片的格式；

原理： 是使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接赋值给 img.src；然后通过canvas.toDataURL(type)输出相应格式的图片；

方法一：原文链接以及参考链接

方法二：前端vue实现图片压缩并且将其转换为jpg格式图片

以下代码可直接复制：

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