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

原创 2017年11月14日 19:21:40

需求

把在浏览器中的利用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>

相关文章推荐

用print在canvas自定义View实现飘雪花,多色雪花功能。

往往灵活的动画都离不开自定义,系统的太过于正式古板。这时候 就离不开 canvas print  Random 线程。将这些组合在一起的的时候产生不错的化学反应 我们就可以做出 一些基本的自定义动画。...

jQuery打印插件----jQuery.print.js

  • 2017年11月14日 18:52
  • 9KB
  • 下载

基于jquery.print.js插件的js打印demo

  • 2017年04月21日 13:37
  • 110KB
  • 下载

一款很好用的Jquery 打印插件——jQuery.print.js

在进行网页开发中不可避免会使用到打印功能,下面就来学习一下一款简单易用的插件吧! 登录网址https://github.com/DoersGuild/jQuery.print,下载js文件,进行简单的...
  • JodenHe
  • JodenHe
  • 2017年04月21日 12:57
  • 6914

JS 使用 window对象的print方法实现分页打印

JS 使用 window对象的print方法实现分页打印,代码纯个人编写,可直接复制使用!...

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一)

首先在前端把图片进行压缩,然后转换成为Base64的编码,再把Base64的编码使用AJAX来POST到服务器,然后在Java或者PHP后台进行Base64解码,解出来的路径即为上传图片的路径地址,然...

利用js简单实现进度条功能,替换jquery progressbar

前一段时间,要实现一个进度条的需求,但我发现项目里面用的是JQuery 1.7.3 ,而且这个页面里面已经用到了tab的JQuery UI,而且jquery引用的UI 是分好多个部分的(需要用到哪个,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用jQuery.print.js实现canvas的打印功能
举报原因:
原因补充:

(最多只允许输入30个字)