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

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

来源

2016-03-05 Bill

在这里你应该事件监听器连接到input element.but，而不是你连接到img元素

，你也想访问event listener里面的文件，所以你应该通过this参考到listener

和你附加事件的方式是不正确的。你正在这样做document.getElementById('getImage').onchange = imageResize(60,60);

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

其实你应该附加功能的参考像下面

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

来源

2016-03-05 07:14:56

这是为你工作？ –

当我运行代码片段时，我可以清楚地看到它正在工作，但由于某种原因，我无法在项目中本地使用它，它使我疯狂 – Bill

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

回答

相关问题