我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式。
实现这样的功能,使用后端语言【php,java等】可以很容易的完成。但是如果只在前端如何完成呢?
1、通过input上传图片,使用FileReader将文件读取到内存中。
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png"。
3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。
方法返回一个包含图片展示的 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);
}
}
地址:http://www.fly63.com/tool/imgformat/
说明:代码临时写的,并不完善,欢迎大家补充。
熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目中使用,作为用户简单说说感受:
canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息
作为一个前端,给元素添加事件是一件司空见惯的事情。可是在Canvas中,其所画的任何东西都是无法获取的,更别说添加事件,那么我们对其就束手无策了吗?
lineCap:如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt(线段末端以方形结束), round (线段末端圆形结束)and square(线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)。默认值是 butt
上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。
OffscreenCanvas 是一个实验中的新特性,主要用于提升 Canvas 2D/3D 绘图的渲染性能和使用体验。OffscreenCanvas 的 API 很简单,但是要真正掌握好如何使用。OffscreenCanvas和canvas都是渲染图形的对象
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
Canvas的变换的相关内容主要是从平移(translate)、旋转(rotate)、缩放(scale)、矩阵变换(Tramsform)、阴影(Shadow)、画布合成和路径裁剪(Clip)多个方面拓展了Canvas的绘图能力。
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!