小编Lcf*_*.vs的帖子

当我尝试使用画布操作图像时,没有任何修改,我的图像文件大小比原始文件大得多.

你能解释为什么会发生这种情况以及如何避免这种情况吗？

https://jsfiddle.net/95rnh4yj/

function one(selector) {
  return document.querySelector(selector);
}

function on(element, event, listener) {
  element.addEventListener(event, listener);
}

function blobToUrl(blob) {
  return Promise.resolve(URL.createObjectURL(blob));
}

function urlToImg(url) {
  return new Promise(function (resolve) {
    let
    img = new Image();

    img.src = url;

    on(img, 'load', function (event) {
       resolve(event.target);
    });
  });
}

function imgToBlob(img) {
  return new Promise(function (resolve) {
    let
    canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');

    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    context.fillStyle = 'transparent';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.drawImage(img, 0, 0); …