$(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. 一些常用运行命令和CMD命令

    运行命令 1. 进入服务页面的命令: services.msc 2. 远程连接命令:mstsc.exe 3. 配置电脑启动项 msconfig 4. 计算器 calc.exe 5. 设定关机时间(se ...

  2. LoadRunner如何开展性能测试

    最近一直想理清思路,特别是碰到一些业务复杂的项目,要求做性能测试,结果一时就不知道怎么下手了.因为之前面试的时候,也碰到很多面试官对性能测试知识方面的提问,面试多了,就有经验,现在写下来,脑子不会乱, ...

  3. linux查看用户登录信息-w命令

    NAME w - Show who is logged on and what they are doing. SYNOPSIS w - [husfV] [user] DESCRIPTION w di ...

  4. 给小班讲stl 之 map、sort、优先队列

    引子:最近老师让给小班讲课,讲stl,,但是我觉得就小班现在这水平根本讲不懂好不好,,,,

  5. linux常用命令--diff

    diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...

  6. 【搜索引擎Jediael开发笔记3】使用HtmlParser提取网页中的链接

    关于HtmpParser的基本内容请见 HtmlParser基础教程 本文示例用于提取HTML文件中的链接 package org.ljh.search.html; import java.util. ...

  7. Github android客户端源代码分析之一:环境搭建

    1.下载相应的包及项目,参考https://github.com/github/android/wiki/Building-From-Eclipse. 2.若需查看某些包的源文件或者javadoc,则 ...

  8. Interaction with the camera or the photo library

    As we said before, we need a delegate to deal with the user interaction with the camera or the photo ...

  9. windows 文件watch nodejs

    本篇博客,主要是记录下最近一直纠结的gulp.watch方法,在工作中我们肯定都遇到过,新添加的文件没办法自动触发watch,下面我们就来看有什么办法处理 1.首先我们肯定是先百度一下 百度推荐的是g ...

  10. python运维开发(八)----面向对象(下)

    内容目录: 面向对象三大特性之多态性 面向对象中的成员:字段.方法.属性 类的成员修饰符 类的特殊成员 特殊成员方法 面向对象其他 异常处理 设计模式之单例模式 面向对象的多态性 多态性:即指多种形态 ...