点击截图功能 js canvas
使用:html2canvas实现浏览器截图
<html>
<head>
<meta name="layout" content="main">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".example1").on("click", function(event) {
event.preventDefault();
html2canvas($(".aa"), {
// height: $(".aa").outerHeight() + 20,
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
newImg.className = 'img'
$(".product").before(newImg);
}
});
});
});
</script>
</head>
<body>
Hello!
<div class="aa" style="background-color: #abc;">
test test test test test test
</div>
<textArea id="textArea" col="20" rows="10"></textArea>
生成界面如下:
<div class="product">
<input class="example1" type="button" value="button">
</div>
</body>
</html>
参考:http://www.cnblogs.com/yanweidie/p/5203943.html#_label0
点击截图功能 js canvas的更多相关文章
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现
最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...
- JS 使用html2canvas实现截图功能的问题记录和解决方案
在实现“截图”功能时,遇到几个bug,研究了一个上午,终于全部解决了: 下面给大家分享下: 1."图片资源跨域",导致无法截图. 浏览器会提示下面的错误 DOMException: ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- HTMLTESTRunner自动化测试报告增加截图功能
我们都知道HTMLTESTRunner自动化测试报告,是Unittest单元测试框架报告,那么在做ui测试的时候就有点不适用了. 我们需要出错截图功能. 以下是我改的,增加了截图功能,先展示界面,再展 ...
- WPF C#截图功能 仿qq截图
原文:WPF C#截图功能 仿qq截图 先上效果图 源码下载地址:http://download.csdn.net/detail/candyvoice/9788099 描述:启动程序,点击窗口butt ...
- Cesium截图功能
首先安装 canvas2image npm intsall canvas2image --save 因为项目基于vue,所以需要在canvas2image的最后面 加上 export default ...
- 利用onekeyup即可实现验证码的点击刷新功能
显示验证码 首先在Home/Controller下创建一个公共控制器PublicController 1 <php2 namespace Home\Controller;3 4 use Thin ...
- 基于java的后台截图功能的实现
Java后台截图功能的实现 背景介绍: 在近期开发的可视化二期项目中的邮件项目中,邮件中的正文中含有图片.该图片的产生是将一些html网页转为图片格式,刚开始考虑使用第三方组件库html2image和 ...
随机推荐
- poj2901 Hotel
Hotel Time Limit: 10000MS Memory Limit: 65536K Total Submissions: 859 Accepted: 280 Description ...
- MyEclipse简介
- 十条最有效的PCB设计黄金法则
十条最有效的PCB设计黄金法则 尽管目前半导体集成度越来越高,许多应用也都有随时可用的片上系统,同时许多功能强大且开箱即用的开发板也越来越可轻松获取,但许多使用案例中电子产品的应用仍然需要使用定制PC ...
- BackgroundWorker类中主要属性、方法和事件
属性: 1.CancellationPending 获取一个值,指示应用程序是否已请求取消后台操作.通过在DoWork事件中判断CancellationPending属性可以认 ...
- java基础解析系列(四)---LinkedHashMap的原理及LRU算法的实现
java基础解析系列(四)---LinkedHashMap的原理及LRU算法的实现 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析 ...
- 递归的二叉查找树Java实现
package practice; public class TestMain { public static void main(String[] args) { int[] ao = {50,18 ...
- vue.js移动端app实战4:上拉加载以及下拉刷新
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...
- zbrush曲面增加厚度
把曲面增加厚度方便雕刻机雕刻. 可以使用zbrush中的边循环功能. 1.准备好需要增加厚度的曲面,把曲面的边缘调整好,尽量的变得平滑. 2.将模型导入到zbrush中,开启双面显示,以方便观察模型的 ...
- java 实现微博,QQ联合登录
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt313 开发平台 http://connect.qq.com/ http:/ ...
- 个人作业3-(Alpha阶段)
一. 总结自己的alpha 过程 1.团队的整体情况 Alpha阶段初期我们团队因分工以及项目具体实施一度茫然,好在在团队队长的带领下确认分工及制定具体计划,使任务有序的进行下去,中间过程虽然遇到一些 ...