最近因为工作需要，做了视频截图和图截图的功能。大概需求是，用户点击某个按钮，可以对图片区域进行部分截取，然后进行进一步的业务操作。

首先说图片截图功能的思路，

（1）下载Jcrop插件，添加css和js的依赖到自己的项目，这么简单的东西，我就不手把手教了。

（2）Jcrop提供的功能很多，我用到的只是获取到截图后的矩形区域的四个点坐标，即相对了图片左上角的偏移量，单位为px。

（3）通过四个点的偏移量，裁剪图片此处有两种方法，一是到后台获取原图片的信息，利用后台语音进行裁剪，本人从事Java开发，所以用的是Java。

　　还有一种是利用canvas的drawImage函数以及toDataURL函数，在前端获去截取的图片base64字符串。得到截图图片。

（4）注意事项，canvas的toDataURL函数，有跨域限制，也就是跨域的话，浏览器会报错。解决方法，后面会给出。

直接贴代码吧

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@page import="java.util.Map"%>  

<html>

<head>

<title>Insert title here</title>

<link rel="stylesheet" href="<%=request.getContextPath() %>/css/jquery.Jcrop.min.css">

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.Jcrop.min.js"></script>

<script type="text/javascript">

var jcrop = null;

function initJscop(){

    $('#cutImg').Jcrop({

        onChange : onChange,

        allowResize : true

    },function(){

        jcrop = this;

    });

}

function onChange(e){

    $('#x1').val(e.x);

    $('#x2').val(e.x2);

    $('#y1').val(e.y);

    $('#y2').val(e.y2);

}

function goCut(){

    jcrop.release();

    var x1 = $('#x1').val();

    var x2 = $('#x2').val();

    var y1 = $('#y1').val();

    var y2 = $('#y2').val();

    var imgs =document.getElementById("cutImg");

    var cavs = document.getElementById("cavs");

    var ctx = cavs.getContext('2d');

    var w = x2 - x1;

    var h = y2 - y1;

    ctx.drawImage(imgs,x1,y1,w,h,0,0,w,h);

    var url = ctx.canvas.toDataURL();

}

window.onload = function(){

    initJscop();

};

</script>

</head>

<body>

<input type="hidden" id="x1">

<input type="hidden" id="x2">

<input type="hidden" id="y1">

<input type="hidden" id="y2">

    <img alt="" id="cutImg" src="<%=request.getContextPath() %>/images/pool.jpg">

    <canvas id="cavs" width="500px;" height="370px;"></canvas>

    <button onclick="goCut();">CUT</button>

</body>

</html>
jcrop 对象可以操作对应的截图事件，在页面加载的时候，初始化它，当然初始化的时机不一定和我一样。
onChange : onChange,代表截图过程的事件，传入参数e可以获取到对应的矩形区域的四个偏移量。
jcrop.release() 代表取消绘制事件，重新绘制。
ctx.drawImage(imgs,x1,y1,w,h,0,0,w,h);这个方法需要着重描述，api如图所示

原网页链接：http://www.runoob.com/tags/canvas-drawimage.html

ctx.drawImage(imgs,x1,y1,w,h,0,0,w,h)返回裁剪图片的base64位字符串。至此，就可以完成图片或者视频的截图功能了。
but,这一切都是在图片和视频都在你的web服务下，才行的通，然鹅，在开发中，图片可能不是来自己的项目，视频服务，也可以能是另外搭建的。
这种情况下，调用方法
ctx.drawImage(imgs,x1,y1,w,h,0,0,w,h)浏览器会抛出异常，也得不到base64的字符串。

针对图片的截图，解决这个问题的方式有两个
首先在img标签或者video标签设置属性
 crossOrigin = "Anonymous"，建议动态设置，本人写死在标签，会出现视频无法播放的问题。估计是知识研究的不够透彻

（1）在图片提供图片服务的响应头添加Access-Control-Allow-Origin *
（2）根据图片url，在后台将对应的图片转成base64，再将base64的图片展示在前端，在此基础上进行截图操作，这样就不存在同源策略的问题了。

针对视频，虽然（1）、（2）都适用，但是视频转base64的字符串过长，并不建议用这种方式，所以对于视频的截图，我推荐的解决方法是（1）。


												


											
通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现的更多相关文章
	

    
								
  1. HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
		
    欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
    
		
    2. 
						
  2. 将canvas画布内容转化为图片（toDataURL()，创建url）
		
    将canvas画布内容转化为图片(toDataURL(),创建url) 总结 1.现在的浏览器都支持右键另存为图片的方法来将canvas画布内容转化为图片 2.在代码里面可以通过toDataURL() ...
    
		
    3. 
						
  3. 安卓自定义View进阶-Canvas之画布操作 转载
		
    安卓自定义View进阶-Canvas之画布操作 转载 https://www.gcssloop.com/customview/Canvas_Convert 本来想把画布操作放到后面部分的,但是发现很多 ...
    
		
    4. 
						
  4. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
		
    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
    
		
    5. 
						
  5. iOS开发之功能模块--高仿Boss直聘的IM界面交互功能
		
    本人公司项目属于社交类,高仿Boss直聘早期的版本,现在Boss直聘界面风格,交互风格都不如Boss直聘以前版本的好看. 本人通过iPhone模拟器和本人真机对聊,将完成的交互功能通过Mac截屏模拟器 ...
    
		
    6. 
						
  6. 从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能
		
    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
    
		
    7. 
						
  7. C#实体图片下载与批量下载（自动保存功能）
		
    新工作,第一个小任务,制作一个点击下载图片的功能.并提供批量下载操作.图片是字节流的形式,存放在数据库中的. 为了避免直接从数据库中,下载失败,会在本地保存一份. 进行压缩的是SharpZip这个压缩 ...
    
		
    8. 
						
  8. Asp.Net 自定义控件实现图片的上传，浏览，删除功能
		
    4月的时候公司比较闲,就想着自己做点东西,其实主要是为了更加熟悉.Net,毕竟接触的时间不长,趁着有时间想提高提高.不过当我做到图片上传这个功能的时候,就有些停滞不前了,连续写了两天也达不到自己想要的 ...
    
		
    9. 
						
  9. js基础进阶--图片上传时实现本地预览功能的原理
		
    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. spring2.5整合struts2
			
    首先第一步: 导入jar包: 我的做法: 导入你的基本使用的spring的jar包 和基本使用的struts2的jar包 然后struts2中有一个和spring整合的jar包一定要导入,不然会抛异常 ...
    
			
    2. 
						
  2. 【Codeforces】Gym 101608G WiFi Password 二分+线段树
			
    题意 给定$n$个数,求有最长的区间长度使得区间内数的按位或小于等于给定$v$ 二分区间长度,线段树处理出区间或,对每一位区间判断 时间复杂度$O(n\log n \log n)$ 代码 #inclu ...
    
			
    3. 
						
  3. 《java编程思想》：设计模式（不定期更新）
			
    1.策略设计模式 创建一个能够根据所传递的参数对象的不同而具有不同的方法,被称为策略设计模式.这类方法包含索要执行的算法中固定不变的部分,而“策略”包含变化的部分.策略就是传递进去的参数对象.在下面的 ...
    
			
    4. 
						
  4. python web server gateway interface (wsgi ) notes
			
    前言: 注:如果需要得到支持批Python3.x以及包含了勘误表,附录,和说明的更新版规范,请查看PEP 3333 摘要: 这篇文档详细说明了一套在web服务器与Python web应用程序(web框 ...
    
			
    5. 
						
  5. Seal Report结合MySQL数据库 报表展现_20161011
			
    昨天留了草稿 未来得及发 今日补发一篇 seal report 操作类似excel数据透视表也包含行标签和列标签及值标签,行列代表的是数据指标的维度,值标签代表的是度量. seal report连接M ...
    
			
    6. 
						
  6. 【LeetCode】454  4Sum II
			
    题目: Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are su ...
    
			
    7. 
						
  7. 开发工作之外的修炼Live笔记
			
    “开发工作之外的修炼”这期Live分享了下列话题: [1] 如何发现自己的兴趣 [2] 财富.资源与被动收入 [3] 目标管理 [4] 快速做选择 [5] 时间管理 [6] 如何投资自己 >&g ...
    
			
    8. 
						
  8. 向nexus远程仓库里面添加JAR
			
    向nexus远程仓库里面添加JAR 远程仓库:http://10.1.252.21:8081/nexus/index.html admin/admin123 方法一:手动 在左侧选择:Reposito ...
    
			
    9. 
						
  9. HL7 V2 分隔符
			
    Delimiter Characters Character Purpose 0x0D Marks the end of each segment. | Composite delimiter. ^  ...
    
			
    10. 
						
  10. Advanced R之函数
			
    转载请注明出处,谢谢. 再次声明下,本人水平有些,错误之处敬请指正. 函数 函数是R基本的块结构单元:为了掌握本书中的更高级技术,你需要对函数有扎实的了解.也许你已经写过一些函数,并了解函数的基本知识 ...
    
			
    11.