jQuery.print.jsを利用してcanvasの印刷機能を実現します.
需要.canvasをまずp に変換する.は、生成した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
効果図
コード
canvas
リンク
jquery.print.jsダウンロード:http://download.csdn.net/download/idomyway/10118559 jquery.print.js資料:http://blog.csdn.net/idomyway/article/details/78533862
効果図
コード
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>