个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 29 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章js+canvas实现图片格式webp/png/jpeg在线转换由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

最后此篇关于js+canvas实现图片格式webp/png/jpeg在线转换的文章就讲到这里了,如果你想了解更多关于js+canvas实现图片格式webp/png/jpeg在线转换的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

29 4 0
文章推荐： C语言实现桶排序的方法示例
文章推荐： C#使用Object类实现栈的方法详解
文章推荐： C语言实现访问及查询MySQL数据库的方法
文章推荐： JavaScript中的函数式编程详解
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com