jquery 将DataURL保存为jpg

rpppsulh  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(146)

我有下面的代码,把一个图像文件(jpg/png)到数据url。一旦裁剪完成,我就可以生成一个渲染图像,但它被保存为png。我需要能够保存为JPG的数据URL。

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"没有影响。有什么想法吗

nzk0hqpo

nzk0hqpo1#

将您的呼叫更改为

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

    });
});

这个应该能用

knsnq2tg

knsnq2tg2#

DataURL只是一个字符串,所以你可以用“jpeg”代替“png”

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

相关问题