原生js使用canvas实现图片格式webp/png/jpeg在线转换

时间: 2018-03-16阅读: 11067标签: 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);
	}
}


在线Dom:

地址:http://www.fly63.com/tool/imgformat/  

说明:代码临时写的,并不完善,欢迎大家补充。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

canvas 兼容性和尺寸

canvas兼容性 1.ie9及其以上版本 2.canvas 兼容性判断方式;canvas 的尺寸设置:直接设置canvas 标签的width和height 属性。canvas 默认尺寸为300*150。

利用canvas实现图片下载功能来实现浏览器兼容问题

项目中需要实现图片下载功能,第一个想到的是使用a标签的download属性来实现,但是在不同浏览器下测试会发现,有的浏览器无效,点击后直接预览图片

利用canvas实现转盘抽奖

最近工作中重构了抽奖转盘,给大家提供一个开发转盘抽奖的思路;由于业务需要所以开发了两个版本抽奖,dom和canvas,不过editor.js部分只能替换图片,没有功能逻辑。需要注意的是此目录隐藏了一个动态数据类(dataStore),因为集成在项目

JavaScript+Canvas实现自定义画板

最近研究了HTML5一些新的元素属性,发现确实好用,特别是里面的Canvas这个新的标签元素。官方介绍:Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

Canvas的变换

Canvas的变换的相关内容主要是从平移(translate)、旋转(rotate)、缩放(scale)、矩阵变换(Tramsform)、阴影(Shadow)、画布合成和路径裁剪(Clip)多个方面拓展了Canvas的绘图能力。

Vue用Canvas生成二维码合成海报并解决清晰度问题

用文字和图片合成一个海报,用于活动结尾页在微信长按分享,接到需求的第一时间,我就想到用 canvas 来画,但是看到 canvas 繁琐的绘制过程,此篇文章主要记录下实现过程,以及遇到的问题。

HTML5 如何创建Canvas画布

<canvas> 标签是 HTML5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布,canvas 元素拥有多种绘制矩形、圆形、字符

js+canvas实现svg标签另存为图片

我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息

canvas的getImageData和toDataUrl跨域问题

背景是这样的,母亲节的时候,我们有个需求就是用户可以长按或者点击一个按钮进行截图后去分享我们的活动,然而我们的图片例如头像,采用又拍云做 cdn 优化,所以意味着图片的链接跟主页面所在域名不一样

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!