$(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. WEB服务与NGINX(22)- nginx的七层负载均衡功能

    目录 1. NGINX实现负载均衡功能 1.1 nginx负载均衡概述 1.2 nginx实现http的负载均衡 1.2.1 nginx基于http负载均衡场景配置 1.2.1.1 负载均衡相关参数 ...

  2. Vue的Vue-ls使用

    Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage 1. 安装 NPM npm install vue-ls --save YARN yarn add vu ...

  3. UE4/5 应用角色根运动的问题

    总的来说UE还是有点绕,网上提到的也不是很清晰,记录下. 具体可以下载UE官方示例ContentExample并进入Animation Level进行查看. 在Level中能看到根运动的必要步骤: 1 ...

  4. 2020版IDEA配置Tomcat 10出现卡主问题

    问题描述 配置了2020版的IDE和Tomcat,但是产生了,日志打印中途,卡住了的问题,如图: 18-Aug-2021 00:46:09.763 信息 [main] org.apache.catal ...

  5. 10-flask博客项目

    centos7 编译安装python3.7.1 安装步骤 centos7自带python2,由于执行yum需要python2,所以即使安装了python3也不能删除python21.安装依赖包yum ...

  6. kubernets之高级调度

    一 节点的污点以及pod的容忍度以及节点的亲缘性对比 1.1 首先需要介绍的是节点的污点以及pod的污点容忍度 污点是节点的属性,容忍度是pod的属性,只有当一个pod的容忍度包含节点的污点,pod才 ...

  7. .NET 9 预览版:打造云原生及人工智能 AI 平台

    前言 微软发布了 .NET 9 首个预览版,分享.NET团队对 .NET 9 的初步愿景,该愿景将于今年年底在 .NET Conf 2024 上发布. 重点关注针对云原生和人工智能领域的应用程序开发以 ...

  8. centos7系统的七个运行级别和设置默认运行级别

    一.系统七个运行级别概述 0 系统停机模式,系统默认运行级别不能设置为0,否则不能正常启动,机器关的 1 单用户模式,root权限,用于系统维护,禁止远程登陆,就像Windows下的安全模式登录 2 ...

  9. 一文教你基于LangChain和ChatGLM3搭建本地知识库问答

    本文分享自华为云社区<[云驻共创]LangChain+ChatGLM3实现本地知识库,转华为云ModelArts,实现大模型AI应用开发> ,作者:叶一一. 一.前言 本期华为云的讲师是华 ...

  10. 一分钟部署prometheus&grafana全方面监控SpringBoot项目

    0x01 创建目录 找一个你喜欢的地方,创建项目根目录 example: [root@demo-78 ~]# mkdir /data/prometheus 0x02 创建配置文件 进入到项目根目录: ...