2

我有以下代码将图像文件（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"没有影响。有任何想法吗？

4

1 回答 1

3

将您的呼叫更改为

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) 方法时，它必须返回一个 data: URL，其中包含由 type 给出的格式的图像表示。可能的值是不带参数的 MIME 类型，例如 image/png、image/jpeg，或者如果实现实际上保留了足够的信息以可靠地从画布呈现 SVG 图像，甚至可能是 image/svg+xml。

编辑

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"));;

    });
});

这应该工作

于 2014-10-03T15:00:31.003 回答