原生js图片格式转换
分类专栏: Javascript&
简介 将图片转换成canvas,再将其转换成指定的图片后缀名。
<p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8" /></p><p> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /></p><p> <title>Document</title></p><p></head></p><p><body></p><p> <input type="file" id="inputimg"></p><p> <select id="myselect"></p><p> <option value="1">webp格式</option></p><p> <option value="2">jpeg格式</option></p><p> <option value="3">png格式</option> </p><p> </select></p><p> <button id="start">开始转换</button></p><p> <p>预览:</p></p><p> <img id="imgShow" src="" alt=""></p><p> <script></p><p> class changeImgType {</p><p> constructor(){}</p><p> // 把image 转换为 canvas对象 </p><p> imgToCanvas(image) {</p><p> var canvas = document.createElement("canvas"); </p><p> canvas.width = image.width; </p><p> canvas.height = image.height; </p><p> canvas.getContext("2d").drawImage(image, 0, 0); </p><p> return canvas; </p><p> }</p><p> //canvas转换为image</p><p> canvasToImg(canvas) {</p><p> var array=["image/webp","image/jpeg","image/png"],</p><p> type=document.getElementById('myselect').value - 1; </p><p> var src = canvas.toDataURL(array[type]);</p><p> console.log('type', type, 'src', src);</p><p> return src;</p><p> }</p><p> //获取图片信息</p><p> getImg(fn){</p><p> var imgFile = new FileReader();</p><p> try{</p><p> imgFile.onload = function(e) {</p><p> console.log('target', e.target);</p><p> var image = new Image();</p><p> image.src= e.target.result; //base64数据 </p><p> image.onload=function(){</p><p> fn(image);</p><p> }</p><p> }</p><p> imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);</p><p> }catch(e){</p><p> console.log("请上传图片!"+e);</p><p> }</p><p> }</p><p> }</p><p> /*事件*/</p><p> document.getElementById('start').addEventListener('click', function(){</p><p> let _changeImgType = new changeImgType();</p><p> _changeImgType.getImg(function(image){</p><p> console.log('image', image)</p><p> var can=_changeImgType.imgToCanvas(image),</p><p> imgshow=document.getElementById("imgShow");</p><p> console.log('can', can);</p><p> imgshow.setAttribute('src',_changeImgType.canvasToImg(can));</p><p> })</p><p> });</p><p> </script></p><p></body></p><p></html></p><p><br></p>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
Node 配置sequelize + mysql,根据模型自动创建数据库表
研究了一下午的node + sequelize + mysql。
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据