js实现截图保存图片功能的代码示例
前几天公司项目里有这样一个需求，把网页的某一部分能够一键截图。这个功能其实就是对人力的一个优化，如果是人为做的话，相信大家都知道怎么做（用截图工具在指定区域截图，然后保存到本地，再上传的服务器上去）。我这个主要就解决这个批量的人力的优化。好，废话不多说了。直接上逻辑和代码。'
这个问题的解决方案：html to canvas to png. 目前有一个这样的插件: html2canvas,
html2canvas($targetElem, {
useCORS: true,
onrendered: function(canvas) {
}
});
这个'$targetElem'就是那个要转换的html， useCORS 用来设置图片是否跨域（如html图片域名和当前网站不是同一个域名，需要设置这个属性）， onrendered 是转换完成后执行的方法。
里面有一种情况需要考虑：如果html标签里有svg标签， 目前htm2canvas不支持svg标签。
这个情况下就需要先把svg处理成html2canvas能处理标签。
我这策略是 svg 转换成 canvas ，html2canvas 转换完成，再回复svg。这里我还需要这个插件canvg（svg转canvas）
具体代码如下
var nodesToRecover = [];
var nodesToRemove = [];
var $svgElem = $targetElem.find('svg');
$svgElem.each(function(index, node) {
var parentNode = node.parentNode;
var canvas = document.createElement('canvas');
canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true});
//将svg转换成canvas
nodesToRecover.push({
parent: parentNode,
child: node
});
parentNode.removeChild(node);
nodesToRemove.push({
parent: parentNode,
child: canvas
});
parentNode.appendChild(canvas);
});
html2canvas($targetElem, {
useCORS: true,
onrendered: function(canvas) {
var base64Image = canvas.toDataURL('image/png').substring(22);
//回复svg
nodesToRemove.forEach(function(pair) {
pair.parent.removeChild(pair.child);
});
nodesToRecover.forEach(function(pair) {
pair.parent.appendChild(pair.child);
});
})
这个方案，我已经完全实现了，并在我们项目里使用了。欢迎大家使用，如果有什么问题，可以留言给我。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
spring(java,js,html) 截图上传图片实例详解
html <#-- 上传头像 测试页 使用imgareaselect 插件 --> 最后 上传了这个插件 共学习参考 <link rel="stylesheet" type="text/css" href="${frontRes}/imgareaselect/css/imgareaselect-animated.css" /> <link rel="stylesheet" type="t
-
JS图片自动轮换效果实现思路附截图
今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片 下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x
-
js+HTML5实现视频截图的方法
本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&
-
JavaScript获取某年某月的最后一天附截图
1.实现源码 <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Jav
-
javascript实现粘贴qq截图功能（clipboardData）
这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图.旺旺截图或者其它截图软件.具体代码如下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>利用 clipboardData 在网页中实现截屏粘贴的功能</title> <
-
javascript在网页中实现读取剪贴板粘贴截图功能
见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen
-
javascript截图 jQuery插件imgAreaSelect使用详解
为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用.主要实现的形式有两种,一种是flash截图,另一种就是javascript截图,两种方法各有秋千,关于Flash截图可以参考一下UcHome程序中头像上传功能,但这不是我要讨论的话题,我这里主要是如何实现javascript截图,利用jQuery的imgAreaSelect插件,轻松实现自定义头像[avatar]javascript截图功能. 一,准备: 两个JS文件 1,jq
-
JavaScript实现网页截图功能
使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:
-
js实现截图保存图片功能的代码示例
前几天公司项目里有这样一个需求,把网页的某一部分能够一键截图.这个功能其实就是对人力的一个优化,如果是人为做的话,相信大家都知道怎么做(用截图工具在指定区域截图,然后保存到本地,再上传的服务器上去).我这个主要就解决这个批量的人力的优化.好,废话不多说了.直接上逻辑和代码.' 这个问题的解决方案:html to canvas to png. 目前有一个这样的插件: html2canvas, html2canvas($targetElem, { useCORS: true, onrendered:
-
JS实现星星评分功能实例代码(两种方法)
一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no
-
C# 实现截图软件功能实例代码
本文是利用C# 开发截图软件的小例子,以供学习分享使用. 思路: 截取屏幕图片. 获取要截取的范围,即左上角,右下角坐标 填充到PictureBox中. 笔触功能,荧光笔,矩形,橡皮擦,复制,保存功能 涉及的知识点: MenuStrip:为窗体提供菜单系统.以ToolStripMenuItem为菜单子选项 ToolStrip:为 Windows 工具栏对象提供容器.以ToolStripButton[表示包含文本和图像的可选]为工具栏子元素 PictureBox:表示用于显示图像的 Windows
-
js实现弹窗插件功能实例代码分享
目前测试下:支持IE6+ 火狐 谷歌游览器等. 先来看看此组件的基本配置项:如下: 复制代码 代码如下: this.config = { targetCls : '.clickElem', // 点击元素 title: '我是龙恩', // 窗口标题 content : 'text:<p style="width:100px;height:100px">我是龙</p>', //content : 'img
-
js实现页面打印功能实例代码(附去页眉页脚功能代码)
复制代码 代码如下: <html> <head></head> <style type="text/css" media="screen"> @media print{ .print {display:block;} .notPrint {display:none;} } </style> <script language="javascript"> function pre
-
JS ListBox的简单功能实现代码
页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
wordpress自定义url参数实现路由功能的代码示例
经过两天的正则表达式的学习,和研究wordpress的路由函数,成功实现了自定义wordpress路由功能,以下是路由规则的实现.如果有自定义的url参数,要通过路由传递,必须通过wordpress的函数将参数添加进去: 复制代码 代码如下: //add query_argsfunction add_query_vars($aVars) { $aVars[] = 'score'; $aVars[] = 'type'; // represents the name of the pro
-
Android中实现基本的短信拦截功能的代码示例
要点 1.在Manifest.xml里加"接收"SMS的权限 <uses-permission Android:name="android.permission.RECEIVE_SMS"></uses-permission> 2.在Manifest.xml里注册一个receive <!-- 注册Receiver,并且设置优先级 --> <receiver android:name=".AutoSMS" a
-
Django Form常用功能及代码示例
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 views.py from django.shortcuts import render # Create your views here. from django.forms import Form from django.forms import widgets from django.forms import fields # 对form
-
Android实现点击WebView界面中图片滑动浏览与保存图片功能
一.实现需求 最近在公司的项目中遇到需求如下: 1.点击 WebView 页面的图片实现开启查看图片模式,即可以显示点击的图片,然后滑动显示下一张图片. 3.长按 WebView 页面图片弹出对话框可以选择保存长按的图片到本地相册. 拿到这个需求笔者第一反应是没做过 WebView 相关的交互,甚至分不清这个需求是否需要服务端配合完成 Java 与 JavaScript 的互相调用,一脸茫然. 遇到这种情况笔者的解决思路一般分两个方向: 1.找一个比较出名的客户端有类似功能的,然后 Google