Thank you so much for this tool.
It has helped me a lot in developing a web client solution for uploading custom images to e-ink displays on bespoke devices. I am now trying to extend this for use with 2bit depth 4 level greyscale e-ink displays.
I have managed to update my canvas preview to cga 2bit depth and get the image data from this. I am however unsure how to then convert this data to the hex array. I am using horizontal1bit function and trying to modify this for use as 2bit depth.
function blackAndWhite(canvas, ctx) {
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
// avg > 128 ? avg = 255 : avg = 0;
if (avg >= 0 && avg < 64) {
avg = 64
}
else if (avg >= 64 && avg < 128) {
avg = 128
}
else if (avg >= 128 && avg < 193) {
avg = 193
}
else {
avg = 255
}
data[i] = avg; // red
data[i + 1] = avg; // green
data[i + 2] = avg; // blue
}
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);
}
This is what I suspect I need to play around with:
horizontal1bit: function (data, canvasWidth, canvasHeight) {
var output_string = "";
var output_index = 0;
var byteIndex = 7;
var number = 0;
// format is RGBA, so move 4 steps per pixel
for (var index = 0; index < data.length; index += 4) {
// Get the average of the RGB (we ignore A)
var avg = (data[index] + data[index + 1] + data[index + 2]) / 3;
if (avg > settings["threshold"]) {
number += Math.pow(2, byteIndex);
}
byteIndex--;
// if this was the last pixel of a row or the last pixel of the
// image, fill up the rest of our byte with zeros so it always contains 8 bits
if ((index != 0 && (((index / 4) + 1) % (canvasWidth)) == 0) || (index == data.length - 4)) {
// for(var i=byteIndex;i>-1;i--){
// number += Math.pow(2, i);
// }
byteIndex = -1;
}
// When we have the complete 8 bits, combine them into a hex value.
if (byteIndex < 0) {
var byteSet = number.toString(16);
if (byteSet.length == 1) { byteSet = "0" + byteSet; }
var b = "0x" + byteSet;
output_string += b + ", ";
output_index++;
if (output_index >= 16) {
output_string += "\n";
output_index = 0;
}
number = 0;
byteIndex = 7;
}
}
return output_string;
},
I am new to programming and to github. Any help would be appreceated.
Rebehy
commented
3 years ago
Thank you so much for this tool. It has helped me a lot in developing a web client solution for uploading custom images to e-ink displays on bespoke devices. I am now trying to extend this for use with 2bit depth 4 level greyscale e-ink displays.
I have managed to update my canvas preview to cga 2bit depth and get the image data from this. I am however unsure how to then convert this data to the hex array. I am using horizontal1bit function and trying to modify this for use as 2bit depth.
function blackAndWhite(canvas, ctx) { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; // avg > 128 ? avg = 255 : avg = 0; if (avg >= 0 && avg < 64) { avg = 64 } else if (avg >= 64 && avg < 128) { avg = 128 } else if (avg >= 128 && avg < 193) { avg = 193 } else { avg = 255 } data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.fillStyle = "white" ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imageData, 0, 0); }
This is what I suspect I need to play around with:
horizontal1bit: function (data, canvasWidth, canvasHeight) { var output_string = ""; var output_index = 0; var byteIndex = 7; var number = 0; // format is RGBA, so move 4 steps per pixel for (var index = 0; index < data.length; index += 4) { // Get the average of the RGB (we ignore A) var avg = (data[index] + data[index + 1] + data[index + 2]) / 3; if (avg > settings["threshold"]) { number += Math.pow(2, byteIndex); } byteIndex--; // if this was the last pixel of a row or the last pixel of the // image, fill up the rest of our byte with zeros so it always contains 8 bits if ((index != 0 && (((index / 4) + 1) % (canvasWidth)) == 0) || (index == data.length - 4)) { // for(var i=byteIndex;i>-1;i--){ // number += Math.pow(2, i); // } byteIndex = -1; } // When we have the complete 8 bits, combine them into a hex value. if (byteIndex < 0) { var byteSet = number.toString(16); if (byteSet.length == 1) { byteSet = "0" + byteSet; } var b = "0x" + byteSet; output_string += b + ", "; output_index++; if (output_index >= 16) { output_string += "\n"; output_index = 0; } number = 0; byteIndex = 7; } } return output_string; },
I am new to programming and to github. Any help would be appreceated.