如何在JavaScript中压缩图像大小？

Question

我正在尝试使用JavaScript压缩图像大小。但它返回画布错误。 下面是我的代码。

describe('Test user helper', () => {
    let userInfo

    beforeEach(done => {
        userHelper.getUserInfo('userid123')
            .then(info => {
                userInfo = info
                done() 
            })
    })

    it('return user info if user is found', () => {
        expect(userInfo).toEqual('info of userid 123')
    })
})

错误：

Answer 1

我认为你看起来像这样〜

更新此实现有两种方法可以减小图像的大小。一种方法调整图像大小，另一种方法是压缩图像，保持相同的大小，但会降低质量。

＆＃13;

＆＃13;

//Console logging (html)
if (!window.console)
  console = {};

var console_out = document.getElementById('console_out');
var output_format = "jpg";

console.log = function(message) {
  console_out.innerHTML += message + '<br />';
  console_out.scrollTop = console_out.scrollHeight;
}

var encodeButton = document.getElementById('jpeg_encode_button');
var encodeQuality = document.getElementById('jpeg_encode_quality');


function previewFile() { 
  var preview = document.getElementById('source_image');
  var previewCompress = document.getElementById('result_compress_image');
  var file   = document.querySelector('input[type=file]').files[0]; 
  var reader  = new FileReader();
  reader.addEventListener("load", function(e) {
    preview.src = e.target.result; 
    preview.onload = function() {
      resizeFile(this, preview);
      compressFile(this, previewCompress)
    };

    // preview.src = reader.result; 
  }, false);
  
  if (file) {  
    reader.readAsDataURL(file);
  }
}

function resizeFile(loadedData, preview) { 
  console.log(loadedData.width + ' ' + loadedData.height);
  var canvas = document.createElement('canvas'),
    ctx;
  canvas.width = Math.round(loadedData.width / 2);
  canvas.height = Math.round(loadedData.height / 2);
  var resizedImage = document.getElementById('result_resize_image');
  resizedImage.appendChild(canvas);
  // document.body.appendChild(canvas);
  ctx = canvas.getContext('2d');
  ctx.drawImage(preview, 0, 0, canvas.width, canvas.height);
}


function compressFile(loadedData, preview) { 
  console.log('width: ' + loadedData.width + ' height: ' + loadedData.height);

  var result_image = document.getElementById('result_compress_image');
  var quality = parseInt(encodeQuality.value);
  console.log("Quality >>" + quality);

  console.log("process start...");
  var time_start = new Date().getTime();

  var mime_type = "image/jpeg";
  if (typeof output_format !== "undefined" && output_format == "png") {
    mime_type = "image/png";
  }

  var cvs = document.createElement('canvas');
  cvs.width = loadedData.width;
  cvs.height = loadedData.height;
  var ctx = cvs.getContext("2d").drawImage(loadedData, 0, 0);
  var newImageData = cvs.toDataURL(mime_type, quality / 100);
  var result_image_obj = new Image();
  result_image_obj.src = newImageData;
  result_image.src = result_image_obj.src;

  result_image.onload = function() {
  }
  var duration = new Date().getTime() - time_start;

  console.log("process finished...");
  console.log('Processed in: ' + duration + 'ms');
}

＆＃13;

<input type="file" onchange="previewFile()"><br>
<div>
  <h3>Original Image<h3>
  <img id="source_image" alt="Image preview..." />
</div>
<div>
  <h3>Resized Image<h3>
  <div id="result_resize_image">
  </div>
</div>
<div>
  <h3>Compressed Image<h3>
  <img id="result_compress_image" class='img_container' />
</div>
<br><br>

<div>
  <fieldset>
    <legend>Compressor settings</legend>
    <div id='controls-wrapper'>
      Compression ratio : <input id="jpeg_encode_quality" size='3' readonly='true' type="text" value="30" /> %
    </div>
  </fieldset>
</div>


<div>
  <fieldset>
    <legend>Console output</legend>
    <div id='console_out'></div>
  </fieldset>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能需要调整画布大小

参考以下示例 here

function resizeImg(base, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var context = canvas.getContext("2d");
    var deferred = $.Deferred();
    $("<img/>").attr("src", "data:image/gif;base," + base).load(function() {
        context.scale(width/this.width,  height/this.height);
        context.drawImage(this, 0, 0); 
        deferred.resolve($("<img/>").attr("src", canvas.toDataURL()));               
    });
    return deferred.promise();    
}