正在将DataURL保存为jpg

Saving DataURL to jpg

本文关键字：jpg 保存 DataURL      更新时间：2023-09-26

我有以下代码，可以将图像文件（jpg/png）转换为数据url。裁剪完成后，我可以生成渲染图像，但它被保存为png。我需要能够将数据url保存为jpg。

renderButton.click(function (event) {
var dataUrl;
imgly.renderToDataURL("png", { size: "1280" }, function (err, dataUrl) {
var image = $("<img><br>").attr({
    src: dataUrl
  });
  image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result"));;
    });
});

在renderToDataURL行中将"png"更改为"jpg"不会产生任何影响。有什么想法吗？

将您的呼叫更改为

imgly.renderToDataURL("image/jpeg", { size: "1280" }, function (err, dataUrl)

如何读取源代码

renderToDataURL: (format, options={}, callback) ->
    if typeof options is "function"
      callback = options
      options = {}
@photoProcessor.renderImage options, (err, imageData) =>
      canvas = Utils.newCanvasFromImageData imageData
      callback null, canvas.toDataURL(format)

其中format是图像格式，canvas.toDataURL(format)负责数据转换

问题是MIME类型，如何从规范中读取

当用一个或多个参数调用toDataURL（type）方法时，它必须返回一个数据：包含中图像表示形式的URL由类型给定的格式。可能的值是没有的MIME类型参数，例如image/png、image/jpeg，甚至可能image/svg+xml如果实现实际上保留了足够的信息以可靠地从画布渲染SVG图像。

编辑

renderButton.click(function (event) {
var dataUrl;
imgly.renderToDataURL("image/jpeg", { size: "1280" }, function (err, dataUrl) {
var image = $("<img><br>").attr({
    src: dataUrl
  });
  image.appendTo($(".result"))
  $button = $('<button class="btn btn-default remove">')
        .text('Remove')
        .on('click', function () {
            image.remove();
            $(this).remove();
            return false;
        });
    $button.appendTo($(".result"));;
    });
});

这应该工作

DataURL只是一个字符串，因此您可以替换"png"；用"；jpeg"；

const jpegImg = pngImg.replace("png", "jpeg")
相关文章：