前端转换图片格式前端将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.srcimgFile.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 类型imageconst 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转换为imagefunction 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.srcimgFile.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>

1、该工具目前仅支持转换为webp、jpeg、png的格式。如果是gif动态图片转换后不保留动态效果。
2、请使用高版本浏览器,推荐使用Chrome。

前端转换图片格式前端将png格式图片转成jpg格式前端用使用canvas转换图片格式相关推荐

asp.net 将bmp格式图片怎么转换为jpg_PNG图片怎么转换成JPG？原来还可以这么转换...
PNG和JPG的区别是,对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但PNG与JPG相比,PNG格式的文件容量比较大,不适合日常的传播流通.如果需要上传的图片的网页不支持PNG格式的图片上传, ...
js 利用canvas转换图片格式并下载图片
1.利用canvas转换格式思路很简单,就是在canvas上drawImage,然后再把canvas转换成想要的图片格式 convertImageToCanvas = (image) => { ...
opencv把图片转换成二进制_Python+OpenCV实现将图像转换为二进制格式
Python+OpenCV实现将图像转换为二进制格式发布时间:2020-09-20 20:30:58 来源:脚本之家阅读:68 作者:大蛇王在学习tensorflow的过程中,有一个问题,ten ...
java二维码编码生成并转换成流传入前端页面
java二维码编码生成并转换成流传入前端页面这里主要用了com.google.zxing的依赖,这个依赖主要可以完成图片叠加.二维码生成和图片加文字等功能. ①添加依赖 <dependency ...
React生成二维码并将canvas转换成img格式
1. 导入包生成二维码 npm install qrcode.react npm包链接: https://www.npmjs.com/package/qrcode.react 1.1 生成二维码: i ...
CAD如何转换？一招在线免费将CAD转成多种格式
众所周知,AutoCAD是一款强大的绘图功能软件,具有其他办公软件不具有的甚至无可比拟的功能特性,然而这种格式是CAD特有的,所以其他软件无法正常打开,那么如何将CAD转换成我们常用的文档格式呢? 目 ...
cad在线转换_CAD如何转换？一招在线免费将CAD转成多种格式
众所周知,AutoCAD是一款强大的绘图功能软件,具有其他办公软件不具有的甚至无可比拟的功能特性,然而这种格式是CAD特有的,所以其他软件无法正常打开,那么如何将CAD转换成我们常用的文档格式呢? 目 ...
Cr2格式图片如何转成JPG？分享几种好用的格式转换方法
如何将cr2格式图片转换成JPG格式呢?JPG格式是广泛使用的图片格式,几乎所有的电脑.智能手机.平板电脑和其他设备都支持JPG格式.相比之下,CR2格式只能在部分相机品牌和软件中查看和编辑.将CR2 ...
python导入word转换的html,python如何转换word格式、读取word内容、转成html
# python如何转换word格式.读取word内容.转成html? import docx from win32com import client as wc # 首先将doc转换成docx wo ...

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

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

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

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

前端转换图片格式前端将png格式图片转成jpg格式前端用使用canvas转换图片格式相关推荐

最新文章

热门文章

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

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

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

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

前端转换图片格式 前端将png格式图片转成jpg格式 前端用使用canvas转换图片格式相关推荐

最新文章

热门文章

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

前端转换图片格式前端将png格式图片转成jpg格式前端用使用canvas转换图片格式相关推荐