用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。最近正好学习了html5里的canvas,发现它的图片处理功能比较强大,就打算用canvas提供的api实现纯前端的剪切。这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。我们分别讨论:
创建一个canvas,用drawImage(img,0,0,canvas.width,canvas.height)就可以。主要这里的img是一个Image类的object, 用new Image创建。
var img = new Image();
img.src = "./beauty.jpg";
img.onload = function(){
cxt1.drawImage(img,0,0,canvas1.width,canvas1.height); //一定要写在onload回调中,否则看不到图片
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.mark{
position:absolute;
height:100px;
width:100px;
left:100px;
top:180px;
border:1px solid #000;
cursor:move;
}
</style>
</head>
<body>
<canvas id="c1"></canvas> //显示原图像
<div class="mark" id="mark"></div>
<canvas id="c3"></canvas> //显示剪切后的图像
<script>
var canvas1 = document.getElementById("c1")
var oMark = document.getElementById("mark")
var canvas3= document.getElementById("c3")
canvas1.height = 300;
canvas1.width=300;
canvas3.height=100;
canvas3.width=100;
var cxt1 = canvas1.getContext("2d")
var img = new Image();
img.src = "./beauty.jpg";
var srcX = oMark.offsetLeft-canvas1.getBoundingClientRect().left;
var srcY = oMark.offsetTop-canvas1.getBoundingClientRect().top;
var sWidth = oMark.offsetWidth;
var sHeight = oMark.offsetHeight;
var canvas2 = document.createElement("canvas")
var cxt2=canvas2.getContext("2d")
img.onload = function(){
cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);
var dataImg = cxt1.getImageData(srcX,srcY,sWidth,sHeight)
canvas2.width = sWidth;
canvas2.height = sHeight;
cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height)
var img2 = canvas2.toDataURL("image/png");
var cxt3=canvas3.getContext("2d")
var img3 = new Image();
img3.src = img2;
img3.onload = function(){
cxt3.drawImage(img3,0,0,canvas3.width,canvas3.height)
}
}
</script>
</body>
</html>
Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。
javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。
现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力
在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察
canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上
熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目中使用,作为用户简单说说感受:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!