55
Chapter 3 Programming Guide
3
Prints an Canvas image
Content drawn in HTML5 Canvas is printed using the ePOS-Print Canvas API.
Create an ePOS-Print Canvas API object using the constructor; for the Print method, specify the end point
address for the printer to be used for printing as well as the canvas content and whether to select paper
cut; and then print a document. For the details about the printer end point address, refer to Printer End
Point Address (p.48).
Refer to the following program.
Forthedetailsabouttheprinterendpointaddress,refertoPrinterEndPointAddress(p.48).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<script type="text/javascript" src="epos-print-3.x.x.js"></script>
<script type="text/javascript">
function drawCanvas() {
// Rendering in HTML5 Canvas
//<Obtain the context>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
.
.
.
//Set the end point address
var address = 'http://192.168.192.168/cgi-bin/epos/
service.cgi?devid=local_printer&timeout=10000';
//Create an ePOS-Print Canvas API object
var epos = new epson.CanvasPrint(address);
//Print
epos.cut = true;
epos.print(canvas);
}
</script>
</head>
<body>
<button onclick="drawCanvas()">Run</button>
<canvas id="myCanvas" width="512" height="480"></canvas>
<img id="coffee" src="img/coffee.jpg" alt="">
<img id="wmark" src="img/wmark.png" alt="">
</body>
</html>
Transmission of print document
To Next Page
Loading...
Need help?
General