服务器之家

服务器之家 > 正文

js+canvas实现图片格式webp/png/jpeg在线转换

时间:2021-08-29 17:07     来源/作者:fly63

功能需求:
我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式。

实现思路:
实现这样的功能,使用后端语言【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:

?
1
2
3
4
5
6
7
8
9
<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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*事件*/
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);
    }
}

说明:需要在chrome浏览器中使用,大家可以自行发挥可以做个批量转换。

到此这篇关于js+canvas实现图片格式webp/png/jpeg在线转换的文章就介绍到这了,更多相关webp/png/jpeg在线转换内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:http://www.fly63.com/article/detial/511

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部