<!DOCTYPE html>
<html>
<head>
<title>QrCode Print Via Bluetooth</title>
<script src="/qrious.min.js"></script>
</head>
<body>
<canvas id="qr"></canvas>
<br />
<button onclick="onButtonClick()" style="height: 200px; width: 400px;">Imprimir por Bluetooth</button>
<script>
(function () {
var qr = new QRious({
element: document.getElementById('qr'),
value: 'https://www.centauro.net'
});
})();
var canvas = document.getElementById("qr");
var context = canvas.getContext("2d");
let imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
var printCharacteristic;
let index = 0;
let data;
async function connectToPrinter() {
return new Promise(function (resolve) {
navigator.bluetooth.requestDevice({
filters: [{ //Mostrar solo los dispositivos bluetooth que puedan imprimir.//000018f0 00001101
services: ['000018f0-0000-1000-8000-00805f9b34fb']
}]
})
.then(device => {
//console.log('> Found ' + device.name);
//alert('Connecting to GATT Server...');
return device.gatt.connect();
})
.then(server => server.getPrimaryService("000018f0-0000-1000-8000-00805f9b34fb"))
.then(service => service.getCharacteristic("00002af1-0000-1000-8000-00805f9b34fb"))
.then(characteristic => {
// Cache the characteristic
printCharacteristic = characteristic; //Guardamos en la variable para poder imprimir de nuevo sin pedir autorización.
})
.then(() => { resolve() })
.catch(handleError);
});
}
//****************************
function getDarkPixel(x, y) {
// Return the pixels that will be printed black
let red = imageData[((canvas.width * y) + x) * 4];
let green = imageData[((canvas.width * y) + x) * 4 + 1];
let blue = imageData[((canvas.width * y) + x) * 4 + 2];
return (red + green + blue) > 0 ? 1 : 0;
}
function getImagePrintData() {
if (imageData == null) {
alert('No image to print!');
return new Uint8Array([]);
}
// Each 8 pixels in a row is represented by a byte
let printData = new Uint8Array(canvas.width / 8 * canvas.height + 8);
let offset = 0;
// Set the header bytes for printing the image
printData[0] = 29; // Print raster bitmap
printData[1] = 118; // Print raster bitmap
printData[2] = 48; // Print raster bitmap
printData[3] = 0; // Normal 203.2 DPI
printData[4] = canvas.width / 8; // Number of horizontal data bits (LSB)
printData[5] = 0; // Number of horizontal data bits (MSB)
printData[6] = canvas.height % 256; // Number of vertical data bits (LSB)
printData[7] = canvas.height / 256; // Number of vertical data bits (MSB)
offset = 7;
// Loop through image rows in bytes
for (let i = 0; i < canvas.height; ++i) {
for (let k = 0; k < canvas.width / 8; ++k) {
let k8 = k * 8;
// Pixel to bit position mapping
printData[++offset] = getDarkPixel(k8 + 0, i) * 128 + getDarkPixel(k8 + 1, i) * 64 +
getDarkPixel(k8 + 2, i) * 32 + getDarkPixel(k8 + 3, i) * 16 +
getDarkPixel(k8 + 4, i) * 8 + getDarkPixel(k8 + 5, i) * 4 +
getDarkPixel(k8 + 6, i) * 2 + getDarkPixel(k8 + 7, i);
}
}
return printData;
}
String.prototype.toBytes = function () {
var arr = []
for (var i = 0; i < this.length; i++) {
arr.push(this[i].charCodeAt(0))
}
return arr
}
//FIN ****************************
function handleError(error) {
alert(error);
}
function sendNextImageDataBatch(resolve, reject) {
//alert("12312");
// Can only write 512 bytes at a time to the characteristic
// Need to send the image data in 512 byte batches
if (index + 512 < data.length) {
printCharacteristic.writeValue(data.slice(index, index + 512)).then(() => {
index += 512;
sendNextImageDataBatch(resolve, reject);
})
.catch(error => reject(error));
} else {
// Send the last bytes
if (index < data.length) {
printCharacteristic.writeValue(data.slice(index, data.length) + '\u000A\u000D').then(() => {
resolve();
})
.catch(error => reject(error));
} else {
resolve();
}
}
}
function sendImageData() {
index = 0;
data = getImagePrintData();
//alert(data);
return new Promise(function (resolve, reject) {
sendNextImageDataBatch(resolve, reject);
});
}
async function onButtonClick() {
if (printCharacteristic == null) {
await connectToPrinter();
sendImageData();
}
else {
//impreme cuando ya tiene la impresora vinculada.
sendImageData();
}
};
</script>
</body>
</html>
But also I want to create a canvas with my company site to print it for this reason wants to print a canvas and not use Esc/Pos codes.