HTML5 有很多好玩的特性，本实验利用 HTML5 的 canvas 技术，结合 HTML5 的 File API 来实现图片的本地裁剪，从一个大图片中选取裁剪区域，保存等功能。

1.创建HTML文件和CSS样式

在本demo中，前端样式做的较为简单，所以二者写在了一个文件中。
index.html

<!DOCTYPE html>
<html><head><title>HTML5 Crop Image</title></head><style type="text/css">body {text-align: center;}#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_edit {margin: 0 auto;display: inline-block;}#show_pic {height: 100px;width: 100px;border: 2px solid #000;overflow: hidden;margin: 0 auto;display: inline-block;}</style><body><input type="file" name="file" id="post_file" /><button id="save_button">SAVE</button><div id="label"><canvas id="get_image"></canvas><p><canvas id="cover_box"></canvas><canvas id="edit_pic"></canvas></p></div><p><span id="show_edit"></span><span id="show_pic"><img src="" /></span></p><script type="text/javascript" src="main.js"></script></body>
</html>

2.具体实现

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; //background image xt.py = 0; //background image yt.sx = 15; //crop area xt.sy = 15; //crop area yt.sHeight = 150; //crop area heightt.sWidth = 150; //crop area widthdocument.getElementById('post_file').addEventListener('change', t.handleFiles, false);},
};

我们所有的函数和变量都是封装在postFile这个对象里面的，上面的 init 函数主要是设置一些初始值。

t.px = 0;
t.py = 0;
t.sx = 15;
t.sy = 15;
t.sHeight = 100;
t.sWidth = 100;

以上的t.px， t.py分别表示在实时预览区域的背景图片的坐标；t.sx，t.sy， t.sHeight， t.sWidth分别表示图片的横纵坐标和宽高。

并且我们通过document.getElementById获取了多个稍后需要操作的元素，注意到：

document.getElementById('post_file').addEventListener('change', t.handleFiles, false);

我们通过监听id为post_file的input表单的change事件来处理用户上传的文件，在这我们交给了handleFiles函数来处理，所以下面我们就来实现handleFiles函数。

 handleFiles: function() {var fileList = this.files[0];var oFReader = new FileReader();oFReader.readAsDataURL(fileList);oFReader.onload = function (oFREvent) {postFile.paintImage(oFREvent.target.result);};},

上面这几行代码就可以基本实现handleFiles的处理功能，我们在这里就使用了 HTML5 的 File API，首先通过new FileReader()来实例化一个 FileReader 对象oFReader，再调用其readAsDataURL()方法将文件的内容读取出来并处理成 base64 编码的格式。

最后，当文件读取完毕并完成加载的时候，我们通过 postFile.paintImage(oFREvent.target.result)处理我们读取到的图片，就是将读取到的图片数据重新绘画到浏览器上。

 paintImage: function(url) {var t = this;var createCanvas = t.getImage.getContext("2d");var img = new Image();img.src = url;img.onload = function(){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);t.imgUrl = t.getImage.toDataURL();t.cutImage();t.drag();};},
```以上最重要的就是根据容器的大小使用 canvas 绘制图片。在上一步使用 File API 的 FileReader 已经得到了需要上传图片的地址了(oFREvent.target.result 这个值)，接下来需要使用 canvas 把这个图片绘制出来。我们首先使用到 getImage.getContext 来获取<canvas id="get_image"></canvas>的 2d 内容，简单理解就是图像内容，然后利用 new Image()来得到一个<img>标签，设置 src 属性的值。```javascript
<img src="data:images/background.png" />

在img.onload函数里，我们的主要目的是为了将图片按照原大小等比例地重画出来，所以才有 if 条件判断，最后我们通过createCanvas.drawImage(img,0,0,t.imgWidth,t.imgHeight);这一行代码来实现真正的绘画图片。

使用 canvas 的clearRect方法清空出一块裁剪区域，使之与不裁剪的地方做明暗对比，这样的目的一个是为了更好地看到对比，一个就是为了用户体验。

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);document.getElementById('show_edit').style.background = 'url(' + t.imgUrl + ')' + -t.sx + 'px ' + -t.sy + 'px no-repeat';document.getElementById('show_edit').style.height = t.sHeight + 'px';document.getElementById('show_edit').style.width = t.sWidth + 'px';
},

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

 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';}};}

从一开始，我们就有一个save按钮在页面上，我们的目的就是在用户点击 save 按钮的时候，将裁剪出来的图片保存到预览右边的方框内，预览框并不是真正的截图，鼠标右键点击是不能保存的，点击 Save 后产生的图片才是可以保存的。于是，我们在 init 方法里面添加下面的代码。

document.getElementById('save_button').onclick = function () {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_pic').getElementsByTagName('img')[0].src = t.editPic.toDataURL();};
};

跟实现paintImage方法类似，首先监听 save 按钮的点击事件，然后我们将选中区域的图片利用drawImage方法绘制出来，最后利用toDataURL方法转换成 base64 编码格式，并将该值赋予show_pic下img的src属性，这样就完成了图片的裁剪保存。

jieshu.

基于HTML实现本地图片裁剪相关推荐

html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
HTML5 实现本地图片裁剪
HTML5 实现本地图片裁剪文章目录 HTML5 实现本地图片裁剪 1.知识点 1.HTML 结构与 CSS 样式 2.初始化 3 实现 handleFiles,获取文件,读取文件并生成 url 4 ...
opencv入门基础（七）基于dlib进行本地图片、实时人脸检测
opencv入门基础(七)基于dlib进行本地图片.实时人脸检测一.背景知识 1.Dlib是一个深度学习开源工具,基于C++开发,也支持Python开发接口. 2.由于Dlib对于人脸特征提取效果很 ...
HTML5本地图片裁剪并上传
最近做了一个项目,这个项目中需要实现的一个功能是:用户自定义头像(用户在本地选择一张图片,在本地将图片裁剪成满足系统要求尺寸的大小).这个功能的需求是:头像最初剪切为一个正方形.如果选择的图片小于规定 ...
基于element-upload的自定义图片裁剪上传
核心代码 <el-uploadlist-type="picture-card"action="":auto-upload="false" ...
史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网代码拷贝最后基于vue的图片裁剪vue-cropper 最 ...
地图裁剪器，可以将图片裁剪成瓦片数据，主要用途是将高清卫星图像裁剪成瓦片图，可以做离线地图的开发，基于墨卡托坐标
废话不多说,直接上代码地图裁剪器,可以将图片裁剪成瓦片数据,主要用途是将高清卫星图像裁剪成瓦片图,可以做离线地图的开发,基于墨卡托坐标地图裁剪 package com.wwp.utils.map; ...
VUE图片裁剪组件,基于VueCropper
VUE图片裁剪组件,基于VueCropper 搬砖的同志麻烦点个赞支持下效果图第一步安装vue-cropper插件 npm install vue-cropper 第二步创建组件,把下面的代码复制 ...
基于PyQt5实现查看本地图片功能
基于Python和PyQt5实现查看本地图片功能通过点击按钮打开本地文件夹选择图片进行显示,也可扩展选择图片路径后自动获取图片数量及相关信息·实现翻页.轮播图等效果和功能. 效果 sample_sh ...

基于HTML实现本地图片裁剪

1.创建HTML文件和CSS样式

2.具体实现

基于HTML实现本地图片裁剪相关推荐

最新文章

热门文章