$(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. Paimon的写入流程

    基于Paimon 0.5版本 写入流程的构建org.apache.paimon.flink.sink.FlinkSinkBuilder#build 算子的流向 BucketingStreamParti ...

  2. Java面试题:Spring框架除了IOC和AOP,还有哪些好玩的设计模式?

    Spring是一个基于Java的企业级应用程序开发框架,它使用了多种设计模式来实现其各种特性和功能.本文将介绍一些在Spring中使用的常见设计模式以及相应的代码示例和说明. 单例模式 单例模式是Sp ...

  3. windows 文件夹添加备注

    1,选中希望改动的文件夹,然后右键"单击",选择"属性"按钮. 2,打开"自定义"面板,选择"更改图标",将原来的默认文 ...

  4. Python:Python中的参数屏蔽

    我们有时会不经意间写下如下代码: def update_indices(indices): indices = [] # 像在更新indices前先将其置空 for i in range(10): i ...

  5. 开源低代码框架 ReZero API 正式版本发布 ,界面操作直接生成API

    一.ReZero简介 ReZero是一款.NET中间件 : 全网唯一界面操作就能生成API ,  可以集成到任何.NET6+ API项目,无破坏性,也可让非.NET用户使用exe文件 免费开源:MIT ...

  6. c/c++复习 2.0 ProMax

    main函数执行前后做了什么 初始化.data数据段,包括静态变量和全局变量 初始化.bss字段,包括int 0; bool false: 指针 NULL 设置栈指针.main函数的参数传递.全局对象 ...

  7. 8.18考试总结(NOIP模拟43)[第一题·第二题·第三题·第四题]

    愿你和重要的人,在来日重逢. 前言 题目名字起的很随意... 这天 Luogu 的运势好像是大凶(忌:打模拟赛,注意报零). 但是考得还不错,拿到了这么多场模拟赛以来第二三个场上AC. 所以说,我爱大 ...

  8. JavaScript语法形式2 内部式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Kettle调优教程(推荐收藏)

    1.调整JVM大小 linux文件路径:data-integration/spoon.sh windows路径: -Xms1024m:设置JVM初始内存为1024m.此值可以设置与-Xmx相同,以避免 ...

  10. EBLK日志收集方案

    ELK 是elastic公司提供的一套完整的日志收集以及展示的解决方案,是三个产品的首字母缩写,分别是ElasticSearch.Logstash 和 Kibana.该组合版本会统一发布. Elast ...