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:

<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);
	}
}

在线Demo:

地址:https://www.jb51.net/tools/webp.html

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

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

时间: 2020-08-22

易语言图片格式转换器制作方法

图片格式转换器工具相当的多,实用性也是相当的强,除了软件能够转换,在线也能转换,没有想过自己制作一个这样的软件呢,现在就用易言语来制作一个简单的图片格式转换器,支持批量转换功能.拖入功能! 1.废话不多说了,先来做界面,这里用到通用对话框,拖放对象组件,图片列表采表框,预览图片采用画板,转换进度用了一个进度条,其他就是一些按钮.编辑框.组合框.还有一些标签,不怎么美观,也将就着用! 2.这里为了操作列表框,添加一个菜单,主要是删除列表框的内容,包括全部删除和删除选中,这个菜单就不用显示了,将其设

JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

Js利用Canvas实现图片压缩功能

最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement

canvas压缩图片转换成base64格式输出文件流

昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下 <!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图压缩--&

JS和Canvas实现图片的预览压缩和上传功能

先来一张效果图,压压惊 第一步:用户选择需要上传的图片 <input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()"> 在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax

JS验证图片格式和大小并预览的简单实例

实例如下: function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 1024; var fileType; var fileSize; var filePath; if (obj.files) { // webkit, mozilla... (jq:$.sup

Java处理Webp图片格式转换的示例代码

前言 Webp是Google推出的一种新型图片格式,相比于 传统的PNG/JPG图片有着更小体积的优势,在Web中有着广泛的应用.由于Webp格式推出比较晚, Jdk 内置的图片编解码库对此并不支持. 网上给出的Java环境解决方案往往需要手动在java.library.path中安装对应的动态链接库,windows是dll文件,linux是so文件.这对于开发部署非常不方便. 本文提供一种无需手动安装动态链接库,同时可以方便处理Webp的解决方案 WebP是谷歌的图片格式,java 类库ima

js HTML5 canvas绘制图片的方法

本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img

关于图片存储格式的整理(JPEG格式介绍)

JPG jpg全名是JPEG .JPEG 图片以 24 位颜色存储单个光栅图像.JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的.渐近式 JPEG 文件支持交错. jpg功能 可以提高或降低 JPEG文件压缩的级别.但是,文件大小是以牺牲图像质量为代价的.压缩比率可以高达 100:1.(JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件,而图片质量不会下降.)JPEG 压缩可以很好地处理写实摄影作品.但是,对于颜色较少.对比级别强烈.实心边框或纯色区域大

js+html5绘制图片到canvas的方法

本文实例讲述了js+html5绘制图片到canvas的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not suppor