Question

HTML模板

<html>
<form>
    Image to resize: <input type="file" id="getImage"><br><br>
    </form>
    <img src="." id="image">
<html>

Java脚本

 <script>
    document.getElementById('getImage').onchange = imageResize(60,60);

 var imageResize = function (Width, Height) {


 //-- GET FILE FROM FORM       
    var selectedFile = this.files[0];
//-- GET BASE 64

    File.prototype.convertToBase64 = function (callback) {
        var reader = new FileReader();
        reader.onload = function (e) {
            callback(e.target.result);
        };
        reader.readAsDataURL(this);
    };

    selectedFile.convertToBase64(function (base64) {

 //-- MAKE IMAGE        
        var img = document.createElement('img');
        img.src = base64;
//-- PUSH INTO CANVAS           
        img.onload = function () {        
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            canvas.width = Width; // If i change Width & Height to numbers it works!!
            canvas.height = Height;
            ctx.drawImage(this, 0, 0, Width, Height);

//-- SHOW IMAGE ON PAGE
            document.getElementById("image").src = canvas.toDataURL();
        };
    });
};  

 </script>

正好在我将画布宽度和高度设置为60x60但我无法使用我传入的变量而没有出现错误，我无法弄清楚原因。错误是

Uncaught TypeError: Cannot read property 'files' of undefined

Answer 1

这里你应该将事件监听器附加到input元素。但是你附加到img元素

并且您还想访问event listener中的文件，因此您应该将this引用传递给listener

以及您附加活动的方式不对。你这样做document.getElementById('getImage').onchange = imageResize(60,60);

这是错误的，因为它会执行imageResize()并将结果分配给更改事件。

实际上你应该附上如下功能的参考

document.getElementById('getImage').onchange = imageResize;

我编辑了你的代码。试试这个片段。

var imageResize = function(Width, Height, files) {

  var selectedFile = files[0];

  File.prototype.convertToBase64 = function(callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
      callback(e.target.result);
    };
    reader.readAsDataURL(this);
  };

  selectedFile.convertToBase64(function(base64) {
    var img = document.createElement('img');
    img.src = base64;
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = Width;
      canvas.height = Height;
      ctx.drawImage(this, 0, 0, Width, Height);
      document.getElementById("image").src = canvas.toDataURL();
    };
  });
};
var file = document.getElementById('getImage');
file.onchange = function() {
  imageResize(160, 160, this.files);
};

<form>
  Image to resize:
  <input type="file" id="getImage">
  <br>
  <br>
</form>
<img src="." id="image">

如何使客户端图像调整大小功能可重用

1 个答案: