从输入字段抓取图像以获取图像数据/显示图像
Grab image from input field to get image data / display image
我一直在四处寻找,还没能找到这是否可能。
这是我希望在提交之前发生的事情:当用户选择要上传的文件时,我想获取图像的数据并将其转换为base64。转换后,我想直接在div
中显示它,或者通过AJAX将其发送到服务器,然后在div
中显示。
下面就是我要找的:
// index.php
<input type="file" name="img" id="img" onChange="displayImg(this)">
// displayImg.js
function displayImg(img) {
imgData = img.?; // How do I do this?
img64 = // I know how to do this.
document.write("<img src='data:image/jpeg;base64,"+img64+"' />");
}
function displayImage(evt){
var files = evt.target.files;
var reader = new FileReader();
reader.onload = function(frEvent) {
document.getElementById("renderImage").innerHTML = '<img src="'+frEvent.target.result+'" />';
}
reader.readAsDataURL(files[0]);
}
上面的代码为我工作。它缺乏验证和所有的好东西,但这应该是一个很好的起点。
相关文章:
- 加载/调整大小时未切换图像数据标记
- 存储和检索图像数据URL
- 将图像数据设置为输入文件标记
- 是否可以创建一个画布来提取图像数据,而无需实际渲染画布
- 是从画布获取图像数据的任何方法,从远程视频中提取
- jQuery:裁剪以删除图像数据并替换为新数据
- 将图像数据加载到Angularjs中
- 使用从readAsDataURL()返回的图像数据
- EXIF图像数据可以使用JSSOR在页面上显示吗
- 获取当前图像数据Flexslider
- 将base64图像数据作为src分配给图像时,Firefox和Chrome上的结果不一致
- 原始图像数据显示
- 在画布上拖动和绘制时传输图像数据
- Selenium网络驱动程序:如何使用JavaScripts获取嵌入式图像数据
- 通过REST API上的GET请求发送图像数据
- 是否可以使用图像数据设置画架命中区域
- 获取图像数据跨源错误
- 如何使用Javascript从网页中获取图像数据
- 严格模式下的图像数据数据分配
- HTMLUnit是否包括一个功能性的[HTML5]画布2D实现,能够将图像数据渲染回Java代码