$(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. Linux基础03-Linux文件操作命令

    其实啊,说起计算机操作,大部分情况下就是"增删改查"这四个大字儿,文件操作也是这么回事儿. 就是改文件的时候得用点专门的编辑器,比如那个Vim. 不过Vim这东西,真心不是一两句话 ...

  2. Go类型断言demo

    Go类型断言demo package main import ( "bytes" "encoding/json" "fmt" "i ...

  3. Docker使用docker compose部署zfile 实现在线浏览下载

    需要先安装docker-compose curl -L https://get.daocloud.io/docker/compose/releases/download/v2.2.3/docker-c ...

  4. 等保测评--postgresql修改默认超级用户,建立普通用户使用

    1.postgresql权限说明 SELECT INSERT UPDATE DELETE TRUNCATE REFERENCES TRIGGER CREATE CONNECT TEMPORARY EX ...

  5. Linux环境下:程序的链接, 装载和库[可执行文件的装载]

    现代操作系统如何装载可执行文件? 给进程分配独立的虚拟地址空间 建立虚拟地址空间和可执行文件的映射关系 把CPU指令寄存器设置成可执行文件的入口地址,启动执行 可执行文件在装载的过程中实际上是映射的虚 ...

  6. python的requests模块详解

    原文链接:https://www.cnblogs.com/lanyinhao/p/9634742.html 1.模块说明 requests是使用Apache2 licensed 许可证的HTTP库. ...

  7. 继承与ER图

    会员是用户吗? 实体与集合 er图叫实体联系图.什么是实体?是现实中存在的事物个体,用户背后是实际存在的单个人. 对象->实体 类->实体的集合 er图描述的是实体间的联系 会员是真实存在 ...

  8. 《HelloGitHub》第 98 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  9. 使用计算巢打造纯内网部署的PaaS服务

    私有化部署PaaS软件的公网访问需求 在阿里云计算巢,我们发现,很多本来应该只在VPC内网使用的三方PaaS软件和中间件,在部署时都开启了公网IP,这并不符合最佳实践. 以数据库为例,数据库保存了对企 ...

  10. CF1815

    CF1815 Div. 1 确实难,Virtual Contest 上只完成了两道题,想出来了三道题. A. Ian and Array Sorting 秒切题--考虑将前 \(n - 1\) 个数变 ...