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

最新推荐文章于 2024-07-14 03:38:22 发布

idomyway

最新推荐文章于 2024-07-14 03:38:22 发布

阅读量5.8k

点赞数

分类专栏： HTML5 文章标签： jquery canvas 打印

本文链接：https://blog.csdn.net/idomyway/article/details/78533993

版权

HTML5 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

需求

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

思路

先把canvas转换成img
把生成的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>

idomyway

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery.print.js实现canvas的打印功能

需求把在浏览器中的利用canvas做的图实现打印功能思路先把canvas转换成img把生成的img利用jQuery插件jquery.print.js实现图片打印功能资料链接jquery.print.js下载： http://download.csdn.net/download/idomyway/10118559 jquery.print.js资料： http://blog.cs
复制链接

扫一扫

专栏目录