Canvas操作图片像素（续1：增加选择本地图片及拖拽图片文件功能）

最新推荐文章于 2023-06-08 09:52:04 发布

gc_2299

最新推荐文章于 2023-06-08 09:52:04 发布

阅读量266

点赞数

分类专栏：网页编程文章标签： Ubuntu VSCode Canvas 拖拽文件上传文件

本文链接：https://blog.csdn.net/gc_2299/article/details/115105144

版权

网页编程专栏收录该内容

139 篇文章 10 订阅

订阅专栏

本文介绍了如何使用HTML5的Input标签和FileReader API实现从本地选择和拖拽图片文件，并在页面上显示。通过onchange事件处理图片选择，ondrop事件处理图片拖拽，实现了图片的预览和像素操作。此外，还展示了如何限制文件类型和设置拖拽区域。

摘要由CSDN通过智能技术生成

之前的文章《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