HTML5 本地裁剪图片

最近有时间了解了下html5的各API，发现新浪微博的头像设置是使用canvas实现截图的，加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传更加觉得html5好玩了，想着也试试写写这功能权当学习canvas吧。

下面奉上我自己写的一个demo，代码写得比较少，很多细节不会处理。如果有不得当的地方恳请指教，谢谢啦 ^_^ ^_^

功能实现步奏：

一：获取文件，读取文件并生成url

二：根据容器的大小使用canvas绘制图片

三：使用canvas绘制遮罩层

四：使用canvas绘制裁剪后的图片

五：拖动裁剪框，重新裁剪图片

PS：因为是先把demo写好再写这篇文章的，所以分段贴的代码是直接从代码里面一段段拷的，要留意this对象喔

第一步：获取文件，读取文件并生成url：

在这里我是使用html5里面的file api处理本地文件上传的，因为这样可以不需要把图片上传到服务器，再由服务器返回图片地址来做预览，详细请看：使用File API 之FileReader实现文件上传

document.getElementById(‘post_file‘).onchange = function() {
	var fileList = this.files[0];
	var oFReader = new FileReader();
	oFReader.readAsDataURL(fileList);
	oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
		postFile.paintImage(oFREvent.target.result);//把预览图片url传给函数
	};
}

　　

第二步：根据容器的大小使用canvas绘制图片：

在上一步使用File API的FileReader已经得到了需要上传图片的地址了，接下来需要使用canvas把这个图片绘制出来。这里为什么不直接插入img而用canvas重新绘制呢，这不是多此一举了吗？其实不然。如果用img直接插入页面，就无法自适应居中了，如果使用canvas绘制图片，不但能使图片自适应居中以及能等比例缩放，并且方便把图片的坐标，尺寸大小传给后来的遮罩层，这样能根据图片的坐标以及图片的尺寸大小来绘制遮罩层。

这里稍微要注意下canvas的drawImage方法。参考资料移步这里：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

paintImage: function(url) {
	var t = this;
	var createCanvas = t.getImage.getContext("2d");
	var img = new Image();
	img.src = url;
	img.onload = function(){

		//等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
		//如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
		//t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
		if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
			t.imgWidth = img.width;
			t.imgHeight = img.height;

		} else {
			var pWidth = img.width / (img.height / t.regional.offsetHeight);
			var pHeight = img.height / (img.width / t.regional.offsetWidth);
			t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
			t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
		}
		//图片的坐标
		t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + ‘px‘;
		t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + ‘px‘;

		t.getImage.height = t.imgHeight;
		t.getImage.width = t.imgWidth;
		t.getImage.style.left = t.px;
		t.getImage.style.top = t.py;

		createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
		t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
		t.cutImage();
		t.drag();
	};
},

　　

出来的效果是这样的：

第三步：使用canvas绘制遮罩层

在上一步中已经把需要裁剪的背景图绘制出来了，现在需要根据背景图的坐标和尺寸来绘制遮罩层覆盖在背景上面，并且使用canvas的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比。

（这里的遮罩层仅仅是用来做显示效果，并没有做裁剪图片的工作。不知道这一步能不能直接去掉？有知道的童鞋麻烦告诉下我。）

//绘制遮罩层：
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = ‘block‘;
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;

var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect (0,0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);

　

第四步：使用canvas绘制裁剪后的图片

在第三步里面，把遮罩层绘制好了，但是遮罩层并没有裁剪的能力，仅仅是用来显示裁剪区域与非裁剪区域的对比而已，所以这里就开始做裁剪图片的功能了。同样使用到canvas的drawImage方法。

//绘制剪切图片：
t.editPic.height = t.sHeight;
t.editPic.width = t.sWidth;
var ctx = t.editPic.getContext(‘2d‘);
var images = new Image();
images.src = t.imgUrl;
images.onload = function(){
	ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
	document.getElementById(‘show_edit‘).getElementsByTagName(‘img‘)[0].src = t.editPic.toDataURL(); //把裁剪后的图片使用img标签显示出来
}

　　

第五步：拖动裁剪框，重新裁剪图片

使用截图上传头像功能时我们希望能裁剪到满意的图片，所以裁剪框就需要不停的变动才得以裁剪出完美的图片。前几步已经把裁剪图片的基本功能做出来了，所以现在需要做的就是裁剪框跟进鼠标的移动来实时裁剪图片。

drag: function() {
	var t = this;
	var draging = false;
	var startX = 0;
	var startY = 0;

	document.getElementById(‘cover_box‘).onmousemove = function(e) {
		//获取鼠标到背景图片的距离
		var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
		var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
		//判断鼠标是否在裁剪区域里面：
		if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
			this.style.cursor = ‘move‘;

			this.onmousedown = function(){
				draging = true;
				//记录上一次截图的坐标
				t.ex = t.sx;
				t.ey = t.sy;
				//记录鼠标按下时候的坐标
				startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
				startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
			}
			window.onmouseup = function() {
				draging = false;
			}

			if (draging) {
				//移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
				if ( t.ex + (pageX - startX) < 0 ) {
					t.sx = 0;
				} else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
					t.sx = t.imgWidth - t.sWidth;
				} else {
					t.sx = t.ex + (pageX - startX);
				};

				if (t.ey + (pageY - startY) < 0) {
					t.sy = 0;
				} else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
					t.sy = t.imgHeight - t.sHeight;
				} else {
					t.sy = t.ey + (pageY - startY);
				}

				t.cutImage();
			}
		} else{
			this.style.cursor = ‘auto‘;
		}
	};
}

　　

大功告成，图片如下：

demo完整代码如下：

html和css：

#label{border:1px solid #ccc;background-color:#fff;text-align:center;height:300px; width:300px;margin:20px auto;position:relative;}
#get_image{position:absolute;}
#edit_pic{position:absolute;display:none;background:#000;}
#cover_box{position: absolute;z-index: 9999;display:none;top:0px;left:0px;}
#show_pic{height:100px;width:100px;border:2px solid #000;overflow:hidden;margin:0 auto;}

　　

<input type="file" name="file" id="post_file">
<div id="label">
	<canvas id="get_image"></canvas>
	<span>
		<canvas id="cover_box"></canvas>
		<canvas id="edit_pic"></canvas>
	</span>
</div>

<div id="show_edit">
	<img src="">
</div>

　

js：

var postFile = {
    init: function() {
        var t = this;
        t.regional = document.getElementById(‘label‘);
        t.getImage = document.getElementById(‘get_image‘);
        t.editPic = document.getElementById(‘edit_pic‘);
        t.editBox = document.getElementById(‘cover_box‘);
        t.px = 0;    //背景图片X轴
        t.py = 0;    //背景图片Y轴
        t.sx = 15;    //裁剪区域X轴
        t.sy = 15;    //裁剪区域Y轴
        t.sHeight = 100;    //裁剪区域高度
        t.sWidth = 100    //裁剪区域宽度
        document.getElementById(‘post_file‘).addEventListener("change", t.handleFiles, false);
    },
    handleFiles: function() {
        var fileList = this.files[0];
        var oFReader = new FileReader();
        oFReader.readAsDataURL(fileList);
        oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
            postFile.paintImage(oFREvent.target.result);//把预览图片URL传给函数
        };
    },
    paintImage: function(url) {
        var t = this;
        var createCanvas = t.getImage.getContext("2d");
        var img = new Image();
        img.src = url;
        img.onload = function(){

            //等比例缩放图片(如果图片宽高都比容器小，则绘制的图片宽高 = 原图片的宽高。)
            //如果图片的宽度或者高度比容器大，则宽度或者高度 = 容器的宽度或者高度，另一高度或者宽度则等比例缩放
            //t.imgWidth：绘制后图片的宽度；t.imgHeight：绘制后图片的高度；t.px：绘制后图片的X轴；t.py：绘制后图片的Y轴
            if ( img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
                t.imgWidth = img.width;
                t.imgHeight = img.height;

            } else {
                var pWidth = img.width / (img.height / t.regional.offsetHeight);
                var pHeight = img.height / (img.width / t.regional.offsetWidth);
                t.imgWidth = img.width > img.height ? t.regional.offsetWidth : pWidth;
                t.imgHeight = img.height > img.width ? t.regional.offsetHeight : pHeight;
            }
            //图片的坐标
            t.px = (t.regional.offsetWidth - t.imgWidth) / 2 + ‘px‘;
            t.py = (t.regional.offsetHeight - t.imgHeight) / 2 + ‘px‘;

            t.getImage.height = t.imgHeight;
            t.getImage.width = t.imgWidth;
            t.getImage.style.left = t.px;
            t.getImage.style.top = t.py;

            createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);//没用直接插入背景图片而用canvas绘制图片，是为了调整所需框内图片的大小
            t.imgUrl = t.getImage.toDataURL();//储存canvas绘制的图片地址
            t.cutImage();
            t.drag();
        };
    },
    cutImage: function() {
        var t = this;

        //绘制遮罩层：
        t.editBox.height = t.imgHeight;
        t.editBox.width = t.imgWidth;
        t.editBox.style.display = ‘block‘;
        t.editBox.style.left = t.px;
        t.editBox.style.top = t.py;

        var cover = t.editBox.getContext("2d");
        cover.fillStyle = "rgba(0, 0, 0, 0.5)";
        cover.fillRect (0,0, t.imgWidth, t.imgHeight);
        cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);

        //绘制剪切图片：
        t.editPic.height = t.sHeight;
        t.editPic.width = t.sWidth;
        var ctx = t.editPic.getContext(‘2d‘);
        var images = new Image();
        images.src = t.imgUrl;
        images.onload = function(){
            ctx.drawImage(images,t.sx, t.sy, t.sHeight, t.sWidth, 0, 0, t.sHeight, t.sWidth); //裁剪图片
            document.getElementById(‘show_edit‘).getElementsByTagName(‘img‘)[0].src = t.editPic.toDataURL();
        }
    },
    drag: function() {
        var t = this;
        var draging = false;
        var startX = 0;
        var startY = 0;

        document.getElementById(‘cover_box‘).onmousemove = function(e) {
            //获取鼠标到背景图片的距离
            var pageX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
            var pageY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
            //判断鼠标是否在裁剪区域里面：
            if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight ) {
                this.style.cursor = ‘move‘;

                this.onmousedown = function(){
                    draging = true;
                    //记录上一次截图的坐标
                    t.ex = t.sx;
                    t.ey = t.sy;
                    //记录鼠标按下时候的坐标
                    startX = e.pageX - ( t.regional.offsetLeft + this.offsetLeft );
                    startY = e.pageY - ( t.regional.offsetTop + this.offsetTop );
                }
                window.onmouseup = function() {
                    draging = false;
                }

                if (draging) {
                    //移动时裁剪区域的坐标 = 上次记录的定位 + (当前鼠标的位置 - 按下鼠标的位置)，裁剪区域不能超出遮罩层的区域;
                    if ( t.ex + (pageX - startX) < 0 ) {
                        t.sx = 0;
                    } else if ( t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
                        t.sx = t.imgWidth - t.sWidth;
                    } else {
                        t.sx = t.ex + (pageX - startX);
                    };

                    if (t.ey + (pageY - startY) < 0) {
                        t.sy = 0;
                    } else if ( t.ey + (pageY - startY) + t.sHeight > t.imgHeight ) {
                        t.sy = t.imgHeight - t.sHeight;
                    } else {
                        t.sy = t.ey + (pageY - startY);
                    }

                    t.cutImage();
                }
            } else{
                this.style.cursor = ‘auto‘;
            }
        };
    }
}

时间： 2024-11-05 16:04:19

HTML5 本地裁剪图片的相关文章

HTML5 本地裁剪图片并上传至服务器（转）

很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 5 步.步骤繁琐不说,当很多用户上传图片的时候也很影响服务器性能. HTML5 的出现让我们可以更方便的实现这一需求.虽然这里所说的技术都貌似有点过时了(前端界的“过时”,你懂的),但还是有些许参考价值.在这里我只说一下要点,具体实现同学们慢慢研究. 下面奉上我自己写的一个demo,在输入框中选好

Unity3d本地上传并且裁剪图片-----Android平台

注:引擎版本unity4.x 最近项目需求,需要做用户头像,要求: 1.  可以从本地上传 2.  本地裁剪 3.  压缩控制大小 4.  在三个平台实现PC/Android/IOS 弄了好几天总是搞完了总结一下 从本地上传会用到Android系统功能,打开相册和用摄像机拍照,因此unity和Android的交互是必须要会的. Unity-android可参考到宣雨松的博客http://www.xuanyusong.com/archives/676package com.cheerflame.s

Unity3d本地上传并且裁剪图片-----iOS平台

注:引擎版本unity4.x 最近项目需求,需要做用户头像,要求: 1.  可以从本地上传 2.  本地裁剪 3.  压缩控制大小 4.  在三个平台实现PC/Android/IOS 弄了好几天总是搞完了总结一下 在网上找了一段时间,有人推荐了一个插件,网盘地址忘记存了,直接上代码吧 OpenPhotoController.h : @interface OpenPhotoController : NSObject<UIApplicationDelegate,UIImagePickerContro

HTML5 本地文件操作之FileSystemAPI实例（二）

文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除文件 fileEntry.remove() fs.

[Android Pro] 调用系统相机和图库，裁剪图片

private static final int PHOTO_REQUEST_TAKEPHOTO = 1;// 拍照 private static final int PHOTO_REQUEST_GALLERY = 2;// 从相册中选择 private static final int PHOTO_REQUEST_CUT = 3;// 结果 private File tempFile = new File(Environment.getExternalStorageDirectory(), g

Html5 学习系列（六）Html5本地存储和本地数据库

一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的.关系型的用户数据就根本不可能了.但是进入Html5时代,这一切都不叫事... 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是C

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 补充: 终于可以读出肉的眼能看懂的人类文字了!!! 经在 safari 7.0.4(9537.76.4) 测试,即使关闭 WebGL 支持,Fil

Html5本地存储和本地数据库

一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简,想存储复杂的.关系型的用户数据就根本不可能了.但是进入Html5时代,这一切都不叫事... 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是C