GitHub/EPD-nRF5
1
0
Fork 0
mirror of https://github.com/tsl0922/EPD-nRF5.git synced 2025-12-08 15:58:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

make canvas2bytes more readable

Browse Source
This commit is contained in:
Shuanglei Tao
2024-12-09 22:07:05 +08:00
parent 110be06089
commit b20a4e8e03
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
html/js/dithering.js
View File

@@ -38,7 +38,6 @@ function dithering(ctx, width, height, threshold, type) {
let newPixel, err;
for (let currentPixel = 0; currentPixel <= imageDataLength; currentPixel+=4) {
if (type ==="none") {
// No dithering
imageData.data[currentPixel] = imageData.data[currentPixel] < threshold ? 0 : 255;
@@ -79,6 +78,7 @@ function dithering(ctx, width, height, threshold, type) {
ctx.putImageData(imageData, 0, 0);
}
// white: 1, black/red: 0
function canvas2bytes(canvas, type='bw') {
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
@@ -88,11 +88,11 @@ function canvas2bytes(canvas, type='bw') {
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const index = (canvas.width * y + x) * 4;
if (type !== 'bwr') {
buffer.push(imageData.data[index] > 0 && imageData.data[index+1] > 0 && imageData.data[index+2] > 0 ? 1 : 0);
const i = (canvas.width * y + x) * 4;
if (type !== 'red') {
buffer.push(imageData.data[i] === 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 ? 0 : 1);
} else {
buffer.push(imageData.data[index] > 0 && imageData.data[index+1] === 0 && imageData.data[index+2] === 0 ? 0 : 1);
buffer.push(imageData.data[i] > 0 && imageData.data[i+1] === 0 && imageData.data[i+2] === 0 ? 0 : 1);
}
if (buffer.length === 8) {
@@ -118,27 +118,27 @@ function bytes2canvas(bytes, canvas) {
// bw
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const index = (canvas.width * y + x) * 4;
const i = (canvas.width * y + x) * 4;
const bit = buffer.shift();
const value = bit ? 255 : 0;
imageData.data[index] = value; // R
imageData.data[index + 1] = value; // G
imageData.data[index + 2] = value; // B
imageData.data[index + 3] = 255; // A
const value = bit === 0 ? 0 : 255;
imageData.data[i] = value; // R
imageData.data[i + 1] = value; // G
imageData.data[i + 2] = value; // B
imageData.data[i + 3] = 255; // A
}
}
// bwr
// red
if (buffer.length * 2 == len) {
for (let y = 0; y < canvas.height; y++) {
for (let x = 0; x < canvas.width; x++) {
const index = (canvas.width * y + x) * 4;
const i = (canvas.width * y + x) * 4;
const bit = buffer.shift();
if (bit) {
imageData.data[index] = 255; // R
imageData.data[index + 1] = 0; // G
imageData.data[index + 2] = 0; // B
imageData.data[index + 3] = 255; // A
if (bit === 0) {
imageData.data[i] = 255; // R
imageData.data[i + 1] = 0; // G
imageData.data[i + 2] = 0; // B
imageData.data[i + 3] = 255; // A
}
}
}

2
html/js/main.js
View File

@@ -205,7 +205,7 @@ function updateImageData(canvas) {
document.getElementById('cmdIMAGE').value = bytesToHex(canvas2bytes(canvas, 'bw'));
if (epdDriver === '03') {
if (dithering.startsWith('bwr')) {
document.getElementById('cmdIMAGE').value += bytesToHex(canvas2bytes(canvas, 'bwr'));
document.getElementById('cmdIMAGE').value += bytesToHex(canvas2bytes(canvas, 'red'));
} else {
const count = document.getElementById('cmdIMAGE').value.length;
document.getElementById('cmdIMAGE').value += 'F'.repeat(count);