Javascript 将 jpeg、png转换为webp

Javascript 将 jpeg、png 转换为 webp

目的：减少上传图片的大小

不多解释，直接上代码

/*** 根据 jpeg、png File 文件对象，获取 webp 格式的 File 文件对象* @param {File} imageFile jpeg、png图片文件对象* @returns image/webp File*/
const getWebpFileByImageFile = imageFile => {const base64ToFile = (base64, fileName) => {let arr = base64.split(','),type = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], fileName, {type});};return new Promise((resolve, reject) => {const imageFileReader = new FileReader();imageFileReader.onload = function(e) {const image = new Image();image.src = e.target.result;image.onload = function() {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);resolve(base64ToFile(canvas.toDataURL("image/webp"), imageFile.name.split(".")[0] + ".webp"))}}imageFileReader.readAsDataURL(imageFile)});
}

使用示例

<!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>根据 jpeg、png File 文件对象，获取 webp 格式的 File 文件对象</title>
</head>
<body><input type="file" id="inputimg"><button type="button" id="toW">To Webp</button><script>/*** 根据 jpeg、png File 文件对象，获取 webp 格式的 File 文件对象* @param {File} imageFile jpeg、png图片文件对象* @returns image/webp File*/const getWebpFileByImageFile = imageFile => {const base64ToFile = (base64, fileName) => {let arr = base64.split(','),type = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], fileName, {type});};return new Promise((resolve, reject) => {const imageFileReader = new FileReader();imageFileReader.onload = function (e) {const image = new Image();image.src = e.target.result;image.onload = function () {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);resolve(base64ToFile(canvas.toDataURL("image/webp"), imageFile.name))}}imageFileReader.readAsDataURL(imageFile)});}// 使用示例document.getElementById('toW').addEventListener('click', async function () {const file = document.getElementById('inputimg').files[0];const wfile = await getWebpFileByImageFile(file);console.log(file, wfile);});</script>
</body>
</html>

效果截图

可以看到原本 1.1M 的图片转换为 webp 格式后小了406KB

Javascript 将 jpeg、png转换为webp相关推荐

Online PDF to PNG, PDF to JPEG, PDF to WEBP, PDF to TXT - toolfk程序员在线工具网
本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果.Tool ...
JavaScript实现将位转换为浮点数bitsToFloat算法（附完整源码）
JavaScript实现将位转换为浮点数bitsToFloat算法(附完整源码) bitsToFloat.js完整源代码 bitsToFloat.js完整源代码 const precisionConf ...
png批量转换为webp_将JPG，PNG和动画GIF转换为WEBP
png批量转换为webp New image formats like WEP and MOZJPEG will be a major boost to load time on the web. ...
【Android 内存优化】Android 原生 API 图片压缩代码示例 ( PNG 格式压缩 | JPEG 格式压缩 | WEBP 格式压缩 | 动态权限申请 | Android10 存储策略 )
文章目录一. 图片质量压缩二. 图片尺寸压缩三. Android 10 文件访问四. 完整源码示例上一篇博客 [Android 内存优化]图片文件压缩 ( Android 原生 API 提供 ...
JavaScript 实现空间直角坐标系转换为大地坐标系（XYZ→BLH）
一.前言参考文章:使用Matlab对大地测量学中的大地坐标和大地空间直角坐标进行相互转换相关文章:JavaScript 实现大地坐标系转换为空间直角坐标系(BLH→XYZ) 在相同的坐标基准下,将 ...
字符串大小写转换html,javascript将字符串字母转换为大小写字母
你知道,javascript当中把字符串当中的字母全部的转换成大写字母或者是小写字母要怎样才能实现吗?下面要给大家讲到的就是这个方面的内容. 闲话就不多说了,直接看代码吧! let str = &qu ...
如何使用客户端 JavaScript 将视频剪辑转换为 GIF 文件
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群英文 | https:/ ...
JavaScript为unicode编码转换为中文
代码laycode - v1.1 关于这样的数据转换为中文问题,常用的以下方法. 1. eval解析或new Function("'+ str +'")() str = eval( ...
C# json解析字符串总是多出双引号_在JavaScript应用中将CSV转换为JSON
来源:公众号<前端全栈开发者>(ID:by-zhangbing-dev) 将CSV转换为JSON是一项需要做很多工作的任务,在本文中,我将研究如何使用 csvtojson 模块将CSV转换 ...

Javascript 将 jpeg、png转换为webp

Javascript 将 jpeg、png 转换为 webp

不多解释，直接上代码

使用示例

效果截图

Javascript 将 jpeg、png转换为webp相关推荐

最新文章

热门文章