用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。最近正好学习了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>
HTMLCanvasElement提供了toDataURL方法,该方法返回一个包含被类型参数规定图像表现格式的data URI。通过该方法我们就可以生成二维码图片并下载了
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。
实现思路:打开图片并将图片绘制到canvas中;利用canvas的drawImage()函数来裁剪图片;将canvas转化为Image即可。Js重点代码:变量定义、添加各事件按钮、容器等:
最近做一个刮刮卡,需要将文字在canvas中水平、垂直居中;fillText方法为canvas设置文本方法,使用如下所示;上例将文本内容设置在canvas画布的坐标位置上,跳脱web的开发思维,我们可以认为X点相对于文本有左
普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义时,要如何赋予用户一个安全下载页面中图片功能的能力呢?最简单的办法,当然是利用 <a> 标签。根据 MDN 描述
<canvas> 标签是 HTML5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布,canvas 元素拥有多种绘制矩形、圆形、字符
首先需要新建video标签,用于放置需要截取的视频文件,然后Js获取video标签并监听它的 loadeddata 事件,这里简单说下video的事件有哪些?为什么使用loadeddata来获取第一帧。
随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力
canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
最近研究了HTML5一些新的元素属性,发现确实好用,特别是里面的Canvas这个新的标签元素。官方介绍:Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!