原生js基于canvas实现一个简单的前端截图工具代码实例
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
先看效果
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.clip-img-w{
position: relative;
width: 100%;
height: 100%;
font-size: 0;
}
.clip-img-w img{
max-width: 100%;
max-height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.clip-img-w canvas{
position: absolute;
left: 0;
top: 0;
}
.clip-img-w #clipcanvas{
z-index: 2;
}
.clip-img-w #drawcanvas{
background: #fff;
z-index: 1;
}
#img{
display: block;
margin: 0 auto;
}
.box-c{
width: 400px;
height: 200px;
border: 1px solid #F35252;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box-c">
<div class="clip-img-w" id="clip-img-w">
<canvas id="drawcanvas" ></canvas>
<canvas id="clipcanvas" ></canvas>
</div>
</div>
<!-- 结果 -->
<img src="" id="img">
</body>
<script type="text/javascript">
var img = document.getElementById("img");
var url = 'http://img.muchengfeng.cn/FvC7i-GkXYoHE7kGFlNfj7xEzvIQ';
var wrap = document.getElementById("clip-img-w");
var width = wrap.offsetWidth;
var height = wrap.offsetHeight;
var clipcanvas = document.getElementById("clipcanvas");
var drawcanvas = document.getElementById("drawcanvas");
clipcanvas.width = width;
clipcanvas.height = height;
drawcanvas.width = width;
drawcanvas.height = height;
var clipCtx = drawcanvas.getContext("2d");
var clipImg = document.createElement("img");
clipImg.crossOrigin = "anonymous";
clipImg.src = url;
var timg = clipImg.cloneNode();
wrap.appendChild(clipImg);
clipImg.onload = function(){
var x = Math.floor((width - this.width)/2);
var y = Math.floor((height - this.height)/2);
clipCtx.drawImage(this,0,0,timg.width,timg.height,x,y,this.width,this.height);
}
var ctx = clipcanvas.getContext("2d");
ctx.fillStyle = 'rgba(0,0,0,0.6)';
ctx.strokeStyle="green";
var start = null;
var clipArea = {};//裁剪范围
clipcanvas.onmousedown = function(e){
start = {
x:e.offsetX,
y:e.offsetY
};
}
clipcanvas.onmousemove = function(e){
if(start){
fill(start.x,start.y,e.offsetX-start.x,e.offsetY-start.y)
}
}
document.addEventListener("mouseup",function(){
if(start){
start = null;
var url = startClip(clipArea);
img.src= url;
}
})
function fill(x,y,w,h){
ctx.clearRect(0,0,width,height);
ctx.beginPath();
//遮罩层
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(0,0,width,height);
//画框
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(x,y,w,h);
//描边
ctx.globalCompositeOperation = "source-over";
ctx.moveTo(x,y);
ctx.lineTo(x+w,y);
ctx.lineTo(x+w,y+h);
ctx.lineTo(x,y+h);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
clipArea = {
x,
y,
w,
h
};
}
function startClip(area){
var canvas = document.createElement("canvas");
canvas.width = area.w;
canvas.height = area.h;
var data = clipCtx.getImageData(area.x,area.y,area.w,area.h);
var context = canvas.getContext("2d");
context.putImageData(data,0,0);
return canvas.toDataURL("image/png");
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
java利用phantomjs进行截图实例教程
前言 最近工作中遇到一个需求,需要实现截图功能,断断续续查找资料.验证不同的实现方法终于算基本搞定了页面截图,因为中间过程曲折花费较多时间,分享出来帮助大家快速实现截图 为什么选用phantomjs进行截图 截图可以实现的方式有很多,比如: selenium HtmlUnit Html2Image...and so on但是这些实现的截图效果都不好.selenium只能实现截屏,不能截取整个页面,而HtmlUnit.Html2Image对js的支持效果并不好,截下来的图会有很多空白.phanto
-
JavaScript+html5 canvas实现本地截图教程
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.
-
JavaScript实现网页截图功能
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:
-
JS中使用cavas截图网页并解决跨域及模糊问题
前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip
-
js实现截图保存图片功能的代码示例
前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图.这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去).我这个主要就解决这个批量的人力的优化.好,废话不多说了.直接上逻辑和代码.' 这个问题的解决方案:html to canvas to png. 目前有一个这样的插件: html2canvas, html2canvas($targetElem, { useCORS: true, onrendered:
-
JS打开摄像头并截图上传示例
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片 要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以
-
JS实现div模块的截图并下载功能
当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码 首先我们需要引入2个js文件: <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript" src="js/jquery-1.12.3.min.js">
-
原生js基于canvas实现一个简单的前端截图工具代码实例
这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{
-
原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数
-
关于原生js中bind函数的简单实现
今天继续研究了bind函数的实现,也知道了shim和polyfill的说法,现在总结一下, if (!Function.prototype.bind) { Function.prototype.bind = function (oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 internal IsCallable function throw new Typ
-
JS基于FileSystemObject创建一个指定路径的TXT文本文件
本文实例讲述了JS基于FileSystemObject创建一个指定路径的TXT文本文件.分享给大家供大家参考.具体如下: Js创建一个指定路径的TXT文本文件,创建一个新的new ActiveXObject对象,使用这个对象的CreateTextFile方法来创建一个指定路径的TXT文本文件,简单吧? 在IE浏览器上运行该实例会有对应的安全提示,选择"允许阻止的内容",使程序正常运行即可.如下图所示: 文本文件创建成功后提示如下: 若文本文件已存在,则有如下提示: 具体代码如下: &l
-
原生js获取元素样式的简单方法
我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty
-
原生js实现ajax方法(超简单)
上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].d
-
原生js的数组除重复简单实例
js对数组的操作在平常的项目中也会遇到,除去一些增加,或者减少的操作外,还有一个比较重要的操作就是数组的除重,通过数组的除重,我们可以将一个数组中存在的多个重复的数组进行清理,只留下不重复的.另外下面我介绍一种原生就s的数组除重方法. Array.prototype.check= function(){ for(var i=0;i<this.length;i++){ for(var j=i+1;j<this.length;j++){ if(this[i]==this[j]){ this.spl
-
js基于canvas实现时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. canvas标签只是图形容器,您必须使用脚本来绘制图形. 浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 和 Safari 支持 那么本篇文章就通过一个时钟组件来熟悉使用一下关
-
基于PHP实现一个简单的在线聊天功能
目录 前端页面 数据库 实现思路 1.showPage() 2.newChat() 3.getChatText() 4.getChatTemp() 5.pushChat() 总结 要实现功能,首先要做前端,经过对比其他网站的在线聊天功能,发现除了基本的聊天功能以外,还要注意以下几点. 一次只能和一个人聊天,但是可以随意切换其他人. 如果用户是从"发送消息" 入口进来的,那么当前马上就切换到对应的聊天窗口,而且如果之前有过聊天记录,应该把聊天记录也展示出来. 如果是从"我的消息
-
使用原生JS快速写出一个五子棋小游戏
目录 1.棋盘和棋子的绘制. 2.轮流下棋的点击事件 3.获胜条件判断 3.1横轴获胜 3.2数轴获胜 3.3正斜轴获胜 3.4反斜轴获胜 4.悔棋功能 总结 1.棋盘和棋子的绘制. let arr = [ [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {},