js+canvas实现图⽚格式webppngjpeg在线转换
功能需求：
我们在⽹页中上传⼀张图⽚，选择不同的格式，将该图⽚转换为对应的格式。
实现思路：
实现这样的功能，使⽤后端语⾔【php,java等】可以很容易的完成。但是如果只在前端如何完成呢？
1、通过input上传图⽚，使⽤FileReader将⽂件读取到内存中。
2、将图⽚转换为canvas，DataURL()⽅法设置为我们需要的格式，如："image/webp","image/jpeg","image/png"。
3、最后将canvas转换为图⽚，显⽰在⽹页中。点击右键保存，就得到了不同格式的图⽚了。
toDataURL说明：
⽅法返回⼀个包含图⽚展⽰的 data URI 。可以使⽤ type 参数其类型，默认为 PNG 格式。图⽚的分辨率为96dpi。
语法：
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:
/*事件*/
getImg(function(image){
var can=imgToCanvas(image),
ElementById("imgShow");
imgshow.setAttribute('src',canvasToImg(can));
});
});
// 把image 转换为 canvas对象
function imgToCanvas(image) {
var canvas = ateElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
return canvas;
}
//canvas转换为image
function canvasToImg(canvas) {
var array=["image/webp","image/jpeg","image/png"],
文件格式转换在线ElementById('myselect').value-1;
var src = DataURL(array[type]);
return src;
}
//获取图⽚信息
function getImg(fn){
var imgFile = new FileReader();
try{
var image = new Image();
image.src= sult; //base64数据
fn(image);
}
}
}catch(e){
console.log("请上传图⽚！"+e);
}
}
在线Demo：
说明：需要在chrome浏览器中使⽤，⼤家可以⾃⾏发挥可以做个批量转换。
到此这篇关于js+canvas实现图⽚格式webp/png/jpeg在线转换的⽂章就介绍到这了，更多相关webp/png/jpeg在线转换内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。