关闭

利用jQuery.print.js实现canvas的打印功能

标签: jquerycanvas打印
248人阅读 评论(0) 收藏 举报
分类:

需求

把在浏览器中的利用canvas做的图实现打印功能

思路

  1. 先把canvas转换成img
  2. 把生成的img利用jQuery插件jquery.print.js实现图片打印功能

资料链接

jquery.print.js下载:
http://download.csdn.net/download/idomyway/10118559
jquery.print.js资料:
http://blog.csdn.net/idomyway/article/details/78533862

效果图

这里写图片描述
这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #click{
            width: 40px;
            height: 30px;
            border:1px solid #0d1721;
            background: #0B8CD4;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/jQuery.print.min.js"></script>
</head>
<body>
    <canvas id="canvasTest" width="1000px" height="500px"></canvas>
    <div id="click">打印</div>
    <script>
        var  showConvas = document.getElementById("canvasTest");
        if(showConvas.getContext){
            var ctx = showConvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(100,250);
            ctx.lineTo(900,250);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(500,0);
            ctx.lineTo(500,500);
            ctx.stroke();
        }
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
        $("#click").click(function () {
            $(convertCanvasToImage(showConvas)).print();
        });

    </script>
</body>
</html>
0
0
查看评论

Jquery 打印插件——jQuery.print.js使用

需求在进行网页开发中不可避免会使用到打印功能,下面就来学习一下一款简单易用的插件吧!下载地址GitHub官网 个人分享配置参数你可以在调用打印方法时传入一些参数:$("#myElementId").print({ globalStyles:true,//是否包含父文档的...
  • idomyway
  • idomyway
  • 2017-11-14 19:05
  • 401

canvas实现简单的画图功能

canvas实现简单的画图功能功能描述: 有红绿蓝三种颜色的画笔,可以选择画笔的粗细,画出的图可以保存到右边的六个画框中。当右边的六个画框都画满之后,便不能继续保存来了。可以清除画框,清除画布。保存的图片可以右击保存为png格式。实现效果如图所示: 实现代码:<!DOCTYPE html...
  • github_38927899
  • github_38927899
  • 2017-08-20 20:49
  • 573

用canvas实现一个简易的涂鸦画板

这是一个简单的用H5中的新特性canvas写的画板它实现了选择本机图片绘制在浏览器上,并可以用画笔涂鸦最后可以保存涂鸦. Document canvas{border:1px solid green;} 选择图片: 重新涂鸦 保存图片 您的破浏览器不兼容,请升级! ...
  • zDeer520
  • zDeer520
  • 2017-06-21 22:07
  • 709

打印canvas的内容

打印  不被打印区域   JavaScript">        function fun(id){         return documen...
  • github_36085116
  • github_36085116
  • 2017-02-10 16:48
  • 808

java利用IE浏览器实现web打印

看看    "Content-Type" content="text/html; charset=gb2312">        ...
  • u011203602
  • u011203602
  • 2014-07-08 22:00
  • 361

自定义view—Canvas实现手写板和涂鸦功能

学习导航第一节:http://blog.csdn.net/bobo8945510/article/details/53197727 —自定义View—自定义属性及引用第二节:http://blog.csdn.net/bobo8945510/article/details/53203233 自定义vi...
  • bobo8945510
  • bobo8945510
  • 2016-11-21 10:25
  • 1167

java 打印功能实现

最近公司的OA系统刚起步,正在编写一些通用的功能代码,工具类,打印当然必不可少,最简单的实现方式当然是window.print();然而这个方法会打印出当前页面的所有内容 ,后来我选择用@media print来控制打印内容的样式;具体代码如下:     &#...
  • xiaojunjuns1
  • xiaojunjuns1
  • 2016-11-06 19:48
  • 2151

Canvas也能实现Map的能拖能缩放的效果

1. Canvas简介:Canvas是HTML5中新增的一个重要的HTML标签,它为了客户端矢量图形而设计的,顾名思义Canvas就是一个画布,你可以在上面画出你想要的任何图形,如果你想设计一个特色的图标,你可以用Canvas,如果你想在客户端绘制一个矢量图你可以选择Canvas。 http://...
  • jcx5083761
  • jcx5083761
  • 2015-02-13 13:57
  • 6980

使用jQuery.print.js打印

需要的类:jquery,jquery.print.js html> head> print test head> body> input id="print_text_input" type=...
  • chaolyu
  • chaolyu
  • 2017-10-12 21:00
  • 1251

网页打印的通用方法之canvas转换篇

我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少。但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护。         之前写了一个通用打印方法,是基于网上的一个最简洁的打印插件,然后添加了自己的...
  • foren_whb
  • foren_whb
  • 2018-01-05 13:50
  • 134
    个人资料
    • 访问:17176次
    • 积分:1295
    • 等级:
    • 排名:千里之外
    • 原创:108篇
    • 转载:29篇
    • 译文:0篇
    • 评论:8条
    最新评论