javascript - 未从保存的 Canvas 图像中找到 SOI

Question

我有一个使用 Three.js 的实验性应用程序，我允许用户将他在 canvas 元素上绘制的图表保存为 JPEG。我这样做是通过使用:

<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);

同时确保

preserveDrawingBuffer: true

这工作正常，保存的 jpeg 图像可能看起来像这样:

然后我正在试验 this package ，它接受一个图像并找到遵循任何特定线条颜色的两点之间的最短距离。 Path-from-image 包使用 jpeg-js编码和解码图像。

据我所知，JPEG 图像的第 0 个和第一个字节始终是 0xFF 和 0xD8，但是，我在保存的 .jpg 图像文件中不断收到以下错误:

Uncaught Error: SOI not found at constructor.parse

我正在使用 path-from-image 包中的示例代码来测试它在我的应用程序中的功能。代码是:

        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);

错误指向 const image = jpeg.decode(fs.readFileSync(''), true);

虽然这里产生了错误:

        var fileMarker = readUint16();
        if (fileMarker != 0xFFD8) { // SOI (Start of Image)
            throw new Error("SOI not found");
        }

这是 Line 598 in jpeg-js/lib/decoder.js.

该包适用于其他图像，但不适用于我允许用户保存的图像。

关于如何解决这个问题有什么建议吗？

Answer 1

关于.toDataURL()的文档说:canvas.toDataURL(type, encoderOptions);。在您的代码示例中，

var dt = canvas.toDataURL('PathPlanner/jpeg');` 

此方法获取错误的 mime 类型，因此它默认生成 PNG，应该是 'image/jpeg'，结果将是这样的:

var dt = canvas.toDataURL('image/jpeg');