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 ...
随机推荐
- CF 板刷总结
CF 板刷总结 这件事的开始要从万圣节那一天说起.当然,万圣节只用于描述时间,我显然是不参加任何万圣节活动的对吧. 以下是一些我觉得有必要拿出来讲的,有技术含量的题.会持续更新,断更了记得来催更. C ...
- 【Redis 分布式锁】(1)一把简单的“锁”
原文链接:https://www.changxuan.top/?p=1230 在单体架构向分布式集群架构演进的过程中,项目中必不可少的一个功能组件就是分布式锁.在开发团队有技术积累的情况下,做为团队的 ...
- NATAPP--实现SSH内网穿透
NATAPP--实现SSH内网穿透 1. 关于Natapp 2. 使用Natapp 3. Natapp安装和配置 4. XShell连接 相关参考博文原文地址: CSDN:KevenPotter:NA ...
- Spring Boot的进阶和高级
一.Repository接口 二.Repository子接口 三.@Query注解 四.更新及删除操作整合事物 五.CrudRepository接口 六.PagingAndSortingReposit ...
- 编程排序的一个excel-据说玩的好的,年薪50万了。只是你没在对的地方
是一个excel 下面是百度网盘分享地址; http://pan.baidu.com/s/1kTwqRfL
- HTML定位
定位(position) 定位是一种更加高级的布局手段,通过定位可以将元素摆放到元素的任何位置 使用position属性来设置定位 可选值:static 默认值,元素是静止的没有开启定位 relati ...
- 解析一下C++的异常处理
作者:良知犹存 转载授权以及围观:欢迎添加微信:Allen-Iverson-me-LYN 总述 在程序运行过程中经常会碰到一些问题,例如数组下标越界,除数为零等,这些错误不过能被发现处理, ...
- HDFS读写流程(转载)
概述开始之前先看看其基本属性,HDFS(Hadoop Distributed File System)是GFS的开源实现.特点如下: 能够运行在廉价机器上,硬件出错常态,需要具备高容错性 ...
- UDP发送文件
接收端 package com.zy.demo2; import java.io.File; import java.io.FileOutputStream; import java.net.Data ...
- B 明码
B 明码 :汉字的字形存在于字库中,即便在今天,16点阵的字库也仍然使用广泛. 16点阵的字库把每个汉字看成是16x16个像素信息.并把这些信息记录在字节中. 一个字节可以存储8位信息,用32个字节就 ...