在保存的画布图像中找不到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图像文件中收到以下错误：

  

未捕获错误：在constructor.parse找不到SOI

我正在使用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-type，因此它默认生成PNG，应该是'image/jpeg'，结果就是这样：

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