js实现截取网页上特定位置的图片打印或保存

一、实现思路

具体思路是创建一个宽和高都是100%的canvas，使其能够覆盖整个页面，然后根据所要截取的图片起始位置相对于canvas的位置（因为是100%，所以也是相对于网页的位置），以及图片的宽高范围来截屏。

二、具体实现

2.1 简单演示网页（index.html）

在网页的body中有一个div，div中有一个图片。截屏选择截取div区域的位置。具体操作的js文件为ScreenShot.js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">@import url("css/images.css");</style><!--截屏--><script type="text/javascript" src="js/libs/jquery-2.1.0.js"></script><script type="text/javascript" src="js/libs/html2canvas.js"></script><script type="text/javascript" src="js/libs/jQuery.print.js"></script><script type="text/javascript" src="js/libs/jcanvas.min.js"></script><script type="text/javascript" src="js/ScreenShot.js"></script></head><body><!-- 用于演示的被截屏区域div，样式用的内联样式可以在js文件中通过.style来访问 --><div id="filmStage"style="width: 300px; height: 300px; border-color:blue;border-style:solid; border-width:1;left: 0px;top: 0px;"><img src="img/图片1.jpg" id="pic" draggable="false"></div><!-- 用于点击打印或截屏的button --><button class="print">保存</button><!-- 用于选取截屏区域的canvas --><canvas id="bg_canvas" width="100%" height="100%" /></body>
</html>

2.2 实现截屏的js文件（ScreenShot.js）

在这个文件初始化函数window.onload在网页加载完毕后被调用，为按钮绑定了截屏事件。其中最主要的函数是clipScreenshots，用以实现打印或截屏，其参数含义都已标注。
printclip函数用于打印，downloadImage函数用于下载图片。

//初始化绑定按钮事件
window.onload = function() {console.log("初始化");//未使用时hide，点击按钮后show$("#bg_canvas").hide();$(".print").click(function(){$("#bg_canvas").show()//调用选取截屏，filmstage是被打印部分div的idvar filmstage = document.getElementById("filmStage");clipScreenshots("bg_canvas",  parseInt(filmstage.style.left), parseInt(filmstage.style.top), parseInt(filmstage.style.width), parseInt(filmstage.style.height));});}/*** 选取划线的canvasExt* @type {{drawRect: canvasExt.drawRect}}*/
var canvasExt = {/***  * @param {string} canvasId 所要截屏的canvas* @param {int} capture_xy 截屏相对于canvas的起点* @param {int} capture_widthheight 截屏宽高*/drawRect: function(canvasId, capture_x, capture_y, capture_width, capture_height) {// 把body转成canvashtml2canvas(document.body, {scale: 1,// allowTaint: true,useCORS: true //跨域使用}).then(canvas => {var filmstage = document.getElementById("filmStage");printClip(canvas, capture_x, capture_y, capture_width, capture_height);});// 隐藏canvas$("#" + canvasId).hide()}
};/***  * @param {string} canvasId 所要截屏的canvas* @param {int} capture_xy 截屏相对于canvas的起点* @param {int} capture_widthheight 截屏宽高*/
function clipScreenshots(canvasId, capture_x, capture_y, capture_width, capture_height) {canvasExt.drawRect(canvasId, capture_x, capture_y, capture_width, capture_height);
}/*** 打印截取区域* @param canvas 截取的canvas* @param capture_x 截取的起点x* @param capture_y 截取的起点y* @param capture_width 截取的起点宽* @param capture_height 截取的起点高*/
function printClip(canvas, capture_x, capture_y, capture_width, capture_height) {// 创建一个用于截取的canvasvar clipCanvas = document.createElement('canvas')clipCanvas.width = capture_widthclipCanvas.height = capture_height// 截取clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0,capture_width, capture_height)var clipImgBase64 = clipCanvas.toDataURL()// 生成图片var clipImg = new Image()clipImg.src = clipImgBase64var con = confirm('打印截图吗?取消则保存截图')if (con) {$(clipImg).print()} else {downloadIamge(clipImgBase64)}
}/*** 下载保存图片* @param imgUrl 图片地址*/
function downloadIamge(imgUrl) {// 图片保存有很多方式，这里使用了一种投机的简单方法。// 生成一个a元素var a = document.createElement('a')// 创建一个单击事件var event = new MouseEvent('click')// 生成文件名称var timestamp = new Date().getTime();var name = imgUrl.substring(22, 30) + timestamp + '.png';a.download = name// 将生成的URL设置为a.href属性a.href = imgUrl;// 触发a的单击事件 开始下载a.dispatchEvent(event);
}

三、演示效果

点击按钮选择打印或保存：

打印结果：

保存图片结果：

源文件链接：js实现截取网页上任意位置图片打印或保存

参考链接：
JS实现网页选取截屏并保存或打印
JS中$含义及用法

js实现截取网页上特定位置的图片打印或保存相关推荐

如何在html上显示时间设置,js实现在网页上简单显示时间的方法
本文实例讲述了js实现在网页上简单显示时间的方法.分享给大家供大家参考.具体如下: 这是一款网页时钟JS代码,纯javascript实现,显示时.分.秒.网页时间显示.网页时钟有很多,这个真的挺简易的 ...
【9001】如何免费下载或截取网页上面的文字？
问题背景:[9001]如何免费下载或截取网页上面的文字? 1.当我们去网页上游览文章或者写啥啥论文需要截取文章文字时候,点击复制,这个时候让付费下载,嘿嘿,长这么大付费下载是不可能付费下载的,自己敲, ...
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...
react基于WOW.js和Animate.css实现特定位置的动画执行
写在前面:对于css3动画小白的我,自己动手写动画确实很艰难,但是无意间了解到有相关库可以实现,为什么不用呢,嘿嘿(当然也在学css3啦) 文章目录效果展示官网文档实现步骤 1.下载WOW.js ...
运用Share.js插件在网页上添加一键分享到微博、微信等
最近做项目遇到一个需求,就是给网站添加一键分享到微博,微信,qq等社交媒体的功能. 想来应该是通过调用一些现成的接口就可以了,这里总结一下运用Share,js来实现的详细步骤具体做法: 1.下载gi ...
利用js，实现网页上实时更新时间，需要时直接拿来用，不需要改动
html文件代码 <div><span id="showNowTime"></span></div> js文件代码 <scri ...
微信公众号网页上点击放大图片浏览，解决方案
1. 引用微信的JS <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixi ...
python高清大图代码_python2的代码从吉卜力网页上下载高清图片
python2 + 修改基础存储路径 + 给map里面添加源url和存储文件夹,k-v对. # -*- coding: utf-8 -*- import re import urllib import ...

js实现截取网页上特定位置的图片打印或保存

js实现截取网页上特定位置的图片打印或保存

一、实现思路

二、具体实现

2.1 简单演示网页（index.html）

2.2 实现截屏的js文件（ScreenShot.js）

三、演示效果

js实现截取网页上特定位置的图片打印或保存相关推荐

最新文章

热门文章