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(类型，encoderOptions)；。在您的代码示例中，

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

这个方法得到了错误的mime-type，因此它默认生成PNG，它应该是'image/jpeg'，结果将是这样的:

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