I have a unique project using Three.js, where I am enabling users to save diagrams they draw on a canvas as JPEG images. The process involves:
<a id="download" download="PathPlanner.jpg">Download as image</a>
function download() {
var dt = canvas.toDataURL('PathPlanner/jpeg');
this.href = dt;
}
document.getElementById('download').addEventListener('click', download, false);
with the crucial setting of
preserveDrawingBuffer: true
This method works smoothly, resulting in saved jpeg images like this:
https://i.sstatic.net/LZF2l.png
My current experiment involves utilizing this particular package that can determine the shortest distance between two points based on line colors within an image. This package leverages jpeg-js for encoding and decoding images.
Although JPEG images typically start with 0xFF and 0xD8, I encounter the following error when attempting to work with the saved .jpg file:
Uncaught Error: SOI not found at constructor.parse
To test the functionality, I use the provided code snippet from the path-from-image package within my application:
const fs = require('fs');
const jpeg = require('jpeg-js');
const PathFromImage = require('path-from-image');
const redPointCoords = [0, -16];
const bluePointCoords = [0, 0];
const image = jpeg.decode(fs.readFileSync('Images/PathPlanner.jpg'), true);
const pathFromImage = new PathFromImage({
width: image.width,
height: image.height,
imageData: image.data,
colorPatterns: [{ r: [128], g: [128], b: [128] }], //
description of the gray color
});
const path = pathFromImage.path(redPointCoords, bluePointCoords);
console.log(path);
The issue arises specifically at
const image = jpeg.decode(fs.readFileSync(''), true);and further within:
var fileMarker = readUint16();
if (fileMarker != 0xFFD8) { // SOI (Start of Image)
throw new Error("SOI not found");
}
Referencing Line 598 in jpeg-js/lib/decoder.js.
While this package performs well with other images, it encounters obstacles when working with user-saved images. Any advice on resolving this challenge?