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

Question

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

 var reader = new FileReader();
        reader.readAsDataURL(fileItem._file);
        reader.onload = function (event) {
            var base64 = event.target.result.substring(event.target.result.indexOf(',') + 1, event.target.result.length);
     var cvs = document.createElement('canvas');
            var source_img_obj = event.target.result;
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            var newImageData = cvs.toDataURL(type, 70 / 100);
            var result_image_obj = new Image();
            result_image_obj.src = newImageData;
            console.log(result_image_obj);
};

错误：

Answer 1

我觉得你看起来像这样~

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

//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');
}

<input type="file" onchange="previewFile()"><br>
<div>
  <h3>Original Image</h3>
  <img id="source_image" />
</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>