html2Canvas to Images
<script>
$(function () {
var content = document.getElementById("shareImages");
content.style.display = 'block';
function convert2canvas() {
var cntElem = document.getElementById("shareImages");
var shareContent = cntElem;
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 1;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
width: width,
height: height,
useCORS: true
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var img = new Image();
img.src = canvas.toDataURL("image/jpg");
// document.body.appendChild(canvas);
document.body.appendChild(img);
console.log(width);
img.style.width = width + 'px';
img.style.height = height + 'px';
document.body.appendChild(img);
});
};
convert2canvas();
content.style.display = 'none';
})
</script>
html2Canvas to Images的更多相关文章
- 使用html2canvas实现浏览器截图
最近做项目为了解决全局异常信息记录,研究了一下浏览器全屏截图功能,方便用户发现异常时能够快速截图发给管理员.最终记录的异常信息如下,上面的[截图报告管理员]就是使用html2canvas前端插件实现的 ...
- java使用代理 html2canvas 截屏 将页面内容生成图片
1.html2canvas 生成图片简单又好用,但涉及到跨域就会出现问题,官方给出的解决办法是设置代理.基本原理就是在后端将图片的数据生成base64再返回给前端使用.使canvas画布分析元素的时候 ...
- 使用html2canvas实现批量生成条形码
/*前台代码*/ <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Generat ...
- 使用html2canvas实现网页截图并嵌入到PDF
以前我们只能通过截图工具进行截取图像.这使得在业务生产中,变得越来越不方便.目前的浏览器功能越来越强大,H5也逐渐普及,浏览器也可以实现截图了.这里来聊下之前在工作中用到的html2canvas.这里 ...
- html2canvas插件对整个网页或者网页某一部分截图并保存为图片
html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个脚本将当前页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现.它不需要来自服务器任何渲染,整 ...
- html2canvas根据DOM元素样式实现网页截图
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能.html2canvas通过获取页面的DOM和元素的样 ...
- IText&Html2canvas js截图 绘制 导出PDF
Html2canvas JS截图 HTML <div id="divPDF"> 需要截图的区域 </div> JS <script src=" ...
- html2canvas 踩坑总结
需求:将html表格导出为图片,表格可以自己编辑数据,并适配各种屏幕大小.上网搜了下,找到了html2canvas,一开始使用的是最新版0.5.0,最终因为需要支持自定义div编辑框自动换行选择了v0 ...
- html2canvas 网页截图 下载 上传
利用html2canvas插件 对网页截图 并下载和上传图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...
- html2canvas页面截图图片不显示
前两天在一个群里,有人问使用html2canvas屏幕截图的时候为什么页面的图片不显示只显示了文字,我没有做过屏幕截图的需求,所以不是很清楚,今天稍稍测试了一下. 在github上将html2canv ...
随机推荐
- CF413C
正文 题意: 给 n 个关卡,每个关卡得分为 ai,有 m 次机会可以选择一 个关卡通过后不得分,而将现有得分翻倍 你可以安排关卡的通过顺序和策略,求最大得分. 分析: 看到这道题首先想到的就是贪心, ...
- 题解 P3833 【[SHOI2012]魔法树】
题目 直通车 很显然这是个树刨的板子,树上链查询和子树查询 注意: 1.这个点的树根为 0 而不是 1 所以注意读图时点标号 +1 就解决了 2.注意数据范围\(2^{32}\) 然后板子就能过了 n ...
- 详述C++casting操作
Casting----类型转换,也就是将数据从一种类型转换到另一种类型的操作.本文首先给出两种类型转换的方式:隐式转换和显式转换,然后简单介绍一下C语言常用的类型转换方式,最后详细叙述C++中常用的三 ...
- 某cms最新版前台RCE漏洞(无需任何权限)2020-03-15
漏洞文件:application/common/controller/Base.php 中的 getAddonTemplate 方法: 错误的使用了public,导致我们可以直接外部访问. 然后使用了 ...
- Python 中 sorted 如何自定义比较逻辑
在 Python 中对一个可迭代对象进行排序是很常见的一个操作,一般会用到 sorted() 函数 num_list = [4, 2, 8, -9, 1, -3] sorted_num_list = ...
- 四:SpringBoot-定时任务和异步任务的使用方式
SpringBoot-定时任务和异步任务的使用方式 1.定时任务 2.同步和异步 3.定时器的使用 3.1 定时器执行规则注解 3.2 定义时间打印定时器 3.3 启动类开启定时器注解 4.异步任务 ...
- 日志框架(Log4J、SLF4J、Logback)--日志规范与实践
文章目录 一.Log4j 1.1新建一个Java工程,导入Log4j包,pom文件中对应的配置代码如下: 1.2resources目录下创建log4j.properties文件. 1.3输出日志 1. ...
- 使用timeout-decorator为python函数任务设置超时时间
需求背景 在python代码的实现中,假如我们有一个需要执行时间跨度非常大的for循环,如果在中间的某处我们需要定时停止这个函数,而不停止整个程序.那么初步的就可以想到两种方案:第一种方案是我们先预估 ...
- ElasticSearch 入门简介
公号:码农充电站pro 主页:https://codeshellme.github.io ElasticSearch 是一款强大的.开源的.分布式的搜索与分析引擎,简称 ES,它提供了实时搜索与聚合分 ...
- Java 容器系列总结
为什么要使用集合 当我们需要保存一组类型相同的数据的时候,我们应该是用一个容器来保存,这个容器就是数组,但是,使用数组存储对象具有一定的弊端, 因为我们在实际开发中,存储的数据的类型是多种多样的,于是 ...