如何在JavaScript中压缩图像大小？ [英] How to compress image size in JavaScript?

问题描述

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

I am trying to compress image size using JavaScript. but it returns canvas error. below is my code.

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

错误：

推荐答案

我认为你看起来像这样〜

I think you are looking something like this~

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

Update This implementation has two methods to reduce the size of the image. One method resize the image the other method compress the image maintaining the same size but it reduces the quality.

//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" 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>

这篇关于如何在JavaScript中压缩图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！