之前的文章《Canvas操作图片像素》主要介绍的是算法,用来做测试的图片路径是写死在网页中的。为了提高程序功能的通用性,本文根据参考文献,将之前操作图片像素的程序改为支持从本地选择图片文件,同时支持将图片文件从本地拖拽要页面中。
HTML5中支持选择本地文件的是Input标签,将该标签中的type属性设置为file即可选择本地文件。Input标签还支持选择多个文件,只需在input标签属性中设置multiple属性即可。同时为了限制选择的文件类型,可以设置Input标签的accept属性(类似于C#中OpenFileDialog类中的Filter属性),该属性的取值如下图所示:
本文中不需要选择多个文件,每次只选一个图片文件即可,因此在页面的顶部增加Input标签,具体如下所示:
<input type="file" onchange="previewImage(this.files[0])" accept="image/*" /><br>
页面主要处理input标签的onchange事件,在该事件中主要是将选中的图形文件显示在原始图形区域,其中只用的主要类是FileReader。具体代码如下所示(代码参考了参考文献中的多篇文献)。
function previewImage(file)
{
var cnv = document.getElementById("canvas");
var cxt=cnv.getContext("2d");
var image=new Image();
image.onload= function( )
{
cxt.drawImage(image,0,0,cnv.clientWidth,cnv.clientHeight);
PixelOperationFunc();
}
var reader = new FileReader();
reader.onload = function(e)
{
image.src = e.target.result;
}
reader.readAsDataURL(file);
}
页面的效果如下三张截图所示。页面初始化后,点击浏览按钮选择本地图片文件,接着将原始图形显示在页面左侧,右侧显示处理后的图片效果。
接着增加拖拽本地图形文件到页面的功能。通过查阅文献,一般做法是在页面中显示一个区域,设置该区域的与拖拽相关的事件处理函数,主要是dragenter、dragover和dragover三类事件。用户将本地文件拖拽到该区域后,通过DataTransfer对象获取拖拽的文件集合。关于DataTransfer对象的说明及拖拽的详细介绍,可以参考文献2和4.
本文中在页面顶部增加一个块用于文件拖拽,然后设置该块与拖拽相关的事件处理函数(JavaScript代码主要参考自文献4)。主要的代码如下所示。
<div id="container">
<p id="text">请将图片文件拖拽至此区域!</p>
</div>
var dropbox = document.getElementById("container");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e)
{
e.stopPropagation();
e.preventDefault();
}
function dragover(e)
{
e.stopPropagation();
e.preventDefault();
}
function drop(e)
{
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
previewImage(files[0]);
}
页面的效果如下图所示。在页面上方显示文件拖拽区域,用户将本地图形文件拖拽至区域后,页面将原始图形显示在页面左侧,将处理后的图片显示在页面右侧。
文件上传在程序中属于常见操作,本文只是使用HTML5上传和处理本地文件,后续还会接着学习如何在JSP及ASP.NET Core项目中将本地文件上传至后端。
参考文献
[1]https://www.jb51.net/article/88803.htm
[2]https://blog.csdn.net/macanfa/article/details/51916831
[3]https://blog.csdn.net/a4307515/article/details/50505167
[4]https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
[5]https://www.runoob.com/tags/tag-input.html
[6]https://www.w3school.com.cn/tags/tag_input.asp