$(function () {
$("#saveimg_btn").on("click",function (event) {
event.preventDefault();
html2canvas($("#printtable"), {
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL("image/png");
var newImg = document.createElement("img");
newImg.src = dataUrl;
document.body.appendChild(newImg);

$(".no_print").hide();
$("#printtable").hide();
}
});
});
});

<button id="saveimg_btn">生成图片</button>

<table id="printtable" class="ticket">

<tr>

<td>test</td>

</tr>

</table>

js 将网页内容生成图片的更多相关文章

  1. 【html】css、js实现网页内容禁止选中

    网页内容不能选中.复制应该如何实现呢? 通过css *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none ...

  2. 通过js实现随机生成图片

    这次给大家分享一个通过js向HTML添加便签,实现随机代码生成的案例,代码已经放在下方,这里我在下面准备了50张图片,但是没有放在博文中,如果读者想要练习,可以自己下载一些图片,建议下载的多一些. & ...

  3. js 复制网页内容,兼容各浏览器

    因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...

  4. 通过JS将BSAE64生成图片并下载

    HTML:<div style="display:block;margin:0 auto;width:638px;height:795px;"><div id=& ...

  5. 通过js修改网页内容

    js可以通过文本所在标签的id获取该标签对象,然后修改其内容,如: document.getElementById('标签id').innerHTML = '要修改的文本内容'; 该方法可以在要修改的 ...

  6. js使用html2canvas 生成图片然后下载

    1:html2canvas官网 首先去官网把这个JS下载下来 <!DOCTYPE html> <html lang="en"> <head> & ...

  7. 使用html2canvas.js将HTML生成图片

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

  8. 原生JS 将canvas生成图片

    核心代码: <script type="text/javascript"> // Converts image to canvas; returns new canva ...

  9. html5全局属性

    全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx" ...

随机推荐

  1. Python关于eval与json在字典转换方面的性能比较

    背景介绍 因为python中有eval()方法,可以很方便的将一些字符串类型与字典等数据结构之间进行转换, 所以公司的数据处理同事在保存一些特殊数据时就直接将字典的字符串保存在数据库中. 在程序中读取 ...

  2. [置顶] Hibernate从入门到精通(五)一对一单向关联映射

    上次的博文中Hibernate从入门到精通(四)基本映射我们已经讲解了一下基本映射和相关概念,接下来我们会讲稍微复杂点的映射——关系映射. 关系映射分类 关系映射即在基本映射的基础上处理多个相关对象和 ...

  3. rem布局下使用背景图片和sprite图

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片.本文就来聊聊 ...

  4. LDAP实例异常停止日志提示虚拟内存virtual memory不足

    [05/Oct/2014:20:50:37 +0800] - ERROR<5135> - Resource Limit - conn=-1 op=-1 msgId=-1 - Memory ...

  5. Android studio教程:[1] 创建app项目

    Android studio作为面市不久的安卓开发工具,越来越受到大家的喜爱,这里我将介绍如何在Android studio中创建一个APP项目,并在以后经验中介绍其他有关Android studio ...

  6. sql server数据库区分大小写设置

    数据库表中字段alter Table TableName 区分大小写 ALTER Column ColumnName VARCHAR(50) COLLATE Chinese_PRC_CS_AS不区分大 ...

  7. c# 调用EXCEL在VS上能正常运行,部署在IIS上不能实现,在VS中运行页面和发布之后在IIS中运行的区别

    发现一篇文章,很好,解决了这个问题:感谢原博主!特此做个笔记. 地址:http://www.cnblogs.com/zhongxinWang/p/3275154.html 发布在IIS上的Web程序, ...

  8. linux学习笔记之进程间通信

    一.基础知识. 1:进程通信基础(interProcess Communication, IPC):管道,FIFO(命名管道),XSI IPC,POSIX 信号量. 2:管道. 1,缺陷. 1)部分系 ...

  9. git 常用命令总结。

    引用:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396284551 ...

  10. 重写QSqlTableModel的flags函数实现tableview中某些列不可编辑,某些可以编辑

    Qt中使用QsqlTableModel和QTableView来显示数据库的查询结果是非常方便的,但是为了使QTableView中某些了列不可用,就需要重写 Qt::ItemFlags flags(co ...