$(document).ready(function () {
$(".example1").on("click", function (event) {
var width = $(".swiper-slide").width();
var height = $(".swiper-slide").height();
event.preventDefault();
html2canvas($(".swiper-slide"), {
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;
document.body.appendChild(newImg);
// var image = canvas.toDataURL("image/png");
// var w = window.open('about:blank', 'image from canvas');
// w.document.write("<img src='" + image + "' alt='from canvas'/>");
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// window.location.href = image;
}, width: width * 2, height: height * 2
});
});

html2canvas 页面截屏的更多相关文章

  1. javascript实现当前页面截屏

    javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...

  2. Android 使用WebView加载含有Canvas的页面截屏处理

    无法截屏主要原因是webview渲染方式所导致:只需要AndroidManifest.xml中设置属性Android:hardwareAccelerated=”false”.

  3. Android 获取浏览器当前分享页面的截屏

    Android 获取浏览器当前分享页面的截屏 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/BrowserScreenShotActivity 文中 ...

  4. 搭建前端监控系统(六)JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  5. android手机截屏、录屏

    1. 手动截屏,通过其他第三方软件发送截图,或者从手机取出截图 2. 使用命令截图,将截图保存到手机,再拉取到电脑 #!/bin/sh #运行 sh screenshot name picName=$ ...

  6. pytest框架优化——将异常截屏图片加入到allure报告中

    痛点分析: 在做allure定制化的时候,关于附件添加这一块,我们在代码里可以添加我们准备好的附件,这里用图片,通过下面的方法就能实现 allure.attach(file, '图片描述', allu ...

  7. html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示

    1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...

  8. vue中使用html2canvas及解决html2canvas截屏图片模糊问题

    最近在项目中用到了html2canvas插件,遇到的一些坑写下来,与大家共勉. html2canvas  官方网站http://html2canvas.hertzen.com/index.html 这 ...

  9. php结合phantomjs实现网页截屏、抓取js渲染的页面

    首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...

  10. asp.net截屏功能实现截取web页面

    using System.Drawing;  //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http ...

随机推荐

  1. jemeter中json提取器

    1.A接口中的单个参数提取,之后用于其他接口 a. 在需要提取字段的接口上右击添加----后置处理器-----json extractor b. 填写json提取器的数据 1.名称:随便填写,方便自己 ...

  2. flask入门 快速入门后台写接口【API】【Python3】【无前端】【json格式】

    目录 新建项目 虚拟环境 安装flask插件包 新建hello_world.py debug调适 四.flask应用 flask路由 变量规则 唯一的 URL / 重定向行为 flask重定向 JSO ...

  3. 纯JS制作选项卡--JavaScript实例集锦(初学)

    最近重新从最基础学习JavaScript,如同盖房,先要打好基础,一砖一瓦都很重要. 下面我来嘚吧几句,附上从书上学到的实例与效果. JS可以用面向过程去写,也可以使用面向对象.面向对象会使一段JS代 ...

  4. 用 C 语言开发一门编程语言 — 交互式解释器

    目录 文章目录 目录 前言 环境 编译型 vs 解释型 实现交互式解释器 使用 GNU Readline 函数库 前言 通过开发一门类 Lisp 的编程语言来理解编程语言的设计思想,本实践来自著名的& ...

  5. 阿里DataX极简教程

    目录 简介 工作流程 核心架构 核心模块介绍 DataX调度流程 支持的数据 实践 下载 环境 执行流程 引用 简介 DataX是一个数据同步工具,可以将数据从一个地方读取出来并以极快的速度写入另外一 ...

  6. 一次nginx文件打开数的问题排查处理

    现象:nginx域名配置合并之后,发现consul-template无法完成nginx重载,然后发现需要重启nginx,才能让配置生效. 注意:下次哪个服务有报错,就看重启时所有日志输出,各种情况日志 ...

  7. vue ali-oss 上传

    vue项目使用阿里云oss上传图片或下载图片 https://www.cnblogs.com/zoo-x/articles/11778010.html#4565291Vue Element UI + ...

  8. kubernetes ingress部署

    ingress概念 ingress与service,deployment同样都是k8s中的一种资源 ingress用于实现域名方式访问k8s内部应用 安装ingress 1. 安装helm: wget ...

  9. nginx四层负载nginx七层负载,nginx基于nginx-sticky会话保持.

    1. nginx负载均衡实战 nginx提供了 4 7层负载均衡. 可根据业务需求选择不同负载均衡策略. 1.1.1 nginx四层负载均衡[网络层TCP负载] 不支持动静分离,但支持 http my ...

  10. itest(爱测试) 紧急 BUG 修复版(4.5.6)发布,,开源BUG 跟踪管理 & 敏捷测试管理&极简项目管理软件

    itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理4合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代(含任务, ...