- 网站精华
原生js图片格式转换
简介 将图片转换成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
收藏
暂无评论信息