Сохранение DataURL в jpg

Question

У меня есть следующий код, который превращает файл изображения (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"));;

    });
});

изменения "png" в "jpg" в строке renderToDataURL не влияет. Есть идеи?

Answer 1

Измените свой вызов на

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 Type, как вы можете прочитать из спецификации

Когда метод toDataURL(type) вызывается с одним или несколькими аргументами, он должен возвращать data: 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"));;

    });
});

это должно работать

Answer 2

DataURLэто просто строка, поэтому вы можете заменить «png» на «jpeg».

      const jpegImg = pngImg.replace("png", "jpeg")