从输入调整图像大小以上传
Posted
技术标签:
【中文标题】从输入调整图像大小以上传【英文标题】:Resize image from input to upload 【发布时间】:2018-05-03 22:53:26 【问题描述】:我已经为这个问题苦苦挣扎了几个小时。我想从输入标签调整图像大小,然后将其上传到服务器。这是我的尝试。
我的输入元素:
<Input type="file" name="file" onChange=this.handleLoadAvatar />
我的handleLoadAvatar
功能:
handleLoadAvatar(e)
var file = e.target.files[0];
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = (e) =>
img.src = e.target.result;
reader.readAsDataURL(file);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width; // GET STUCK HERE
var height = img.height;
if (width > height)
if (width > MAX_WIDTH)
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
else
if (height > MAX_HEIGHT)
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
this.setState(previewSrc: dataurl);
我在我的项目中使用 ReactJS。我被困在上面的评论中,我无法获得图像的宽度。我在html5 Pre-resize images before uploading 尝试了这个解决方案,但这似乎对我不起作用。谁能指出我的代码有什么问题以及如何修复它?非常感谢!
【问题讨论】:
您能否查看***.com/questions/23945494/… 以解决问题 【参考方案1】:问题是您没有等待图像加载后才访问其width
和height
。
当您在等待reader
时,您应该为img
做同样的事情:
handleLoadAvatar(e)
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = (e) =>
var img = document.createElement("img");
img.onload = () =>
var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 300;
var MAX_HEIGHT = 300;
var width = img.width;
var height = img.height;
if (width > height)
if (width > MAX_WIDTH)
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
else
if (height > MAX_HEIGHT)
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
this.setState(previewSrc: dataurl);
img.src = e.target.result;
reader.readAsDataURL(file);
【讨论】:
以上是关于从输入调整图像大小以上传的主要内容,如果未能解决你的问题,请参考以下文章
如何在nodejs中使用sharp调整图像大小然后使用multer上传
如何在nodejs中使用sharp调整图像大小然后使用multer上传