Question

我试图编写脚本以按给定的百分比值调整图像文件的大小。我的脚本如下：

let canvas;
let array_WH = new Array();
let percent = 50;
let img = new Image();

$(function() {

  function ff(height, width, percentage) {

    var newHeight = height * (percentage / 100);

    var newWidth = width * (percentage / 100);

    return [newWidth, newHeight];
  }

  $("#file_select").change(function(e) {

    var fileReader = new FileReader();

    fileReader.onload = function(e) {



      img.onload = function() {

        array_WH = ff(img.width, img.height, percent);

        console.log('old width: ' + img.width);
        console.log('new width: ' + array_WH[0]);

        width = array_WH[0];

        height = array_WH[1];

        if (canvas) return;

        canvas = document.createElement("canvas");

        canvas.width = width;

        canvas.height = height;

        canvas.getContext("2d").drawImage(this, 0, 0, width, height);

        // //Line added
        var canvasData = canvas.toDataURL();
        // //Line edited
        this.src = canvasData;
        // //Line added
        console.log(canvasData.length * 3 / 4, ' bytes');

        document.body.appendChild(this); //remove this if you don't want to show it

      }

      img.src = e.target.result;

    }

    fileReader.readAsDataURL(e.target.files[0]);

  });

});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>

<h1 class="logo">Upload Picture</h1>
<div id="upload_form_div">
  <form id="upload_form" method="POST" enctype="multipart/form-data" action="upload">
    <input type="file" name="file" capture="camera" id="file_select" />
  </form>
</div>

<div id="loading" style="display:none;">
  Uploading your picture...
</div>

您可以在此处FiddleJs进行演示。

比方说，百分比为50％，因此function ff(height, width, percentage) {...}应该返回新宽度为旧宽度的一半，新高度为旧高度的一半，因此，返回旧图像尺寸的一半。

但是，它不能按预期方式工作。我通过上传3.00 MB（宽度：58000px，高度：3867px）的图像文件进行了测试，然后该函数生成了9.5 MB（宽度：1933px，高度：2900px）的新图像文件，这与1.5 MB的正确文件大小相去甚远旧图片尺寸的一半。

如何按给定的百分比校正功能以达到预期效果？谢谢。

Answer 1

1）更改了通话中的顺序

array_WH = ff(img.height, img.width, percent);

2）添加了参数：输入“ image / jpeg”和jpeg质量为0.5

var canvasData = canvas.toDataURL('image/jpeg', 0.5)

在这里编辑小提琴http://jsfiddle.net/2pu4tmkr/

通过输入百分比值来调整图像文件的大小？

1 个答案: