Search code examples
canvassavepngblobjpeg

Canvas.toBlob() saving as PNG even though I specified JPG

I'm saving my canvas using this function:

c.toBlob(function(blob) {
    saveAs(blob, '@Model.DatabaseName' + '.jpg');
}, 'image/jpg');

The extension is .jpg, and I specified the filetype as .jpg. When I view the file in windows explorer, it says the file type is jpg, but when I try to open it in Photoshop it throws an error because it believes the file to be a png. I confirmed that the filetype is png using the FastStone image viewer. Why isn't it saving correctly?

Solution

  • The encoding type should be: image/jpeg

    Note that canvas.toBlob is not supported by all browsers because it is being reworked to better account for security concerns. Until .toBlob is widely supported, you might try Eli Grey's nice polyfill, FileSaver.js: https://github.com/eligrey/FileSaver.js