这期内容当中小编将会给大家带来有关里JavaScript+canvas实现在线转换图片格式的功能,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
功能需求:
我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式。
实现思路:
实现这样的功能,使用后端语言【php,java等】可以很容易的完成。但是如果只在前端如何完成呢?
1、通过input上传图片,使用FileReader将文件读取到内存中。
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png"。
3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。
toDataURL说明:
方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
语法:
canvas.toDataURL(type, encoderOptions);
type【可选】 图片格式,默认为 image/png,可选格式:"image/webp","image/jpeg","image/png"。
encoderOptions【可选】在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。
注意点:
1、如果画布的高度或宽度是0,那么会返回字符串“data:,”。
2、其中webkit内核浏览器支持“image/webp”类型 。 建议使用Chrome浏览器。
代码例子:
html:
<input type="file" id="inputimg"> <select id="myselect"> <option value="1">webp格式</option> <option value="2">jpeg格式</option> <option value="3">png格式</option> </select> <button id="start">开始转换</button> <p>预览:</p> <img id="imgShow" src="" alt="">
js:
/*事件*/ document.getElementById('start').addEventListener('click', function(){ getImg(function(image){ var can=imgToCanvas(image), imgshow=document.getElementById("imgShow"); imgshow.setAttribute('src',canvasToImg(can)); }); }); // 把image 转换为 canvas对象 function imgToCanvas(image) { var 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) { var array=["image/webp","image/jpeg","image/png"], type=document.getElementById('myselect').value-1; var src = canvas.toDataURL(array[type]); return src; } //获取图片信息 function getImg(fn){ var imgFile = new FileReader(); try{ imgFile.onload = function(e) { var image = new Image(); image.src= e.target.result; //base64数据 image.onload=function(){ fn(image); } } imgFile.readAsDataURL(document.getElementById('inputimg').files[0]); }catch(e){ console.log("请上传图片!"+e); } }
上述就是小编为大家分享的里JavaScript+canvas实现在线转换图片格式的功能了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。