$(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. ansible系列(25)--ansible的notify和handlers

    1. notify和handlers Handlers 是一个触发器,同时是一个特殊的 tasks ,它无法直接运行,它需要被tasks 通知后才会运行.比如: httpd 服务配置文件发生变更,我们 ...

  2. fastposter v2.9.0 程序员必备海报生成器

    fastposter v2.9.0 程序员必备海报生成器 fastposter海报生成器是一款快速开发海报的工具.只需上传一张背景图,在对应的位置放上组件(文字.图片.二维.头像)即可生成海报. 点击 ...

  3. postgresql 创建索引

    --查询索引 select * from pg_indexes where tablename='tab1'; --创建索引(查询用到哪几列,就对哪几个字段创建索引) CREATE INDEX ind ...

  4. Kubernetes Pod调度:从基础到高级实战技巧

    本文深入探讨了Kubernetes中的Pod调度机制,包括基础概念.高级调度技术和实际案例分析.文章详细介绍了Pod调度策略.Taints和Tolerations.节点亲和性,以及如何在高流量情况下优 ...

  5. sqlServer 重复数据项处理,只选其中一条,保留一条

    select * from table where id in (select max(id) from table group by [去除重复的字段名列表,....]) --删除 from tab ...

  6. wxPython==4.2.1 aui.AuiToolBar 如何去掉烦人的抓手?

    aui.AuiToolBar 如何去掉烦人的抓手? 最近在用wxPython做一些GUI小应用,发现工具栏总有几个点(抓手),很影响美观,如下: 目前官方没有提供隐藏抓手的功能,需要更改源码的auib ...

  7. win10找回Ubuntu启动项(非EasyBCD)

    最近想对装在电脑上的Ubuntu进行更新,但是之前在BIOS里改了引导系统的文件,导致找不到Ubuntu启动项,EasyBCD程序也不起作用(整块硬盘Windows分区都是GPT,改BIOS也没什么用 ...

  8. Nginx 修饰符 Location 详解

    概述 location 指令可以用在虚拟服务器 server 部分,并且意味着提供来自客户端的 URI 或者内部重定向访问. location 的定义如下: location [modifier] u ...

  9. ffmpeg之视频(avc+aac)无损转mp4(批处理,拖放)

    很多能够无损转视频的工具都来自命令行的ffmpeg版本,本文将介绍如何简单的批处理方法(直接拖放到bat文件上)来实现无损转视频. 工具/原料 ffmpeg(默认的static版本) 方法/步骤   ...

  10. MyBatis实现MySQL表字段及结构的自动增删

    前言 在开发过程中,总会涉及到数据库表结构字段的增加或者删除,或者是索引的增加和减少,这个时候能把修改表结构字段这些工作都交给程序来进行,那能大大方便开发.正好有一个现成的工具可以在springboo ...