HTML5和JS实现本地图片裁剪并上传功能-

最近做了一个项目，这个项目中需要实现的一个功能是：用户自定义头像（用户在本地选择一张图片，在本地将图片裁剪成满足系统要求尺寸的大小）。这个功能的需求是：头像最初剪切为一个正方形。如果选择的图片小于规定的头像要求尺寸，那么这整张图片都会作为头像。如果大于规定的尺寸，那么用户可以选择要裁剪的区域。用户点击确定按钮，就将裁剪得到的图片数据发送到服务器，在后端将图片数据保存成一个文件。

要完成上述功能，涉及到的知识有：ajax，canvas和html5中的files接口。我将实现这个功能的代码封装到了4个模块中，分别是ajax.js，preview.js，shear.js和customerImg.js。

ajax.js:用于发送ajax请求。

preview.js:用于图片预览

shear.js：用于裁剪图片

customer.js:自定义头像。在这个模块中药引入ajax.js，preview.js和shear.js

我使用webpack进行打包。我还使用了jquery和jquery-ui。

我从这个项目中抽离出了这个功能。下面是这个功能的详细代码。

1.HTML代码

  

   
   选择图片
  
  

   

    

     

     
    

   


   

    
预览
    
    

     确定
    
   

  

 

2.CSS代码

.clearfix:after{
 content: "";
 display: block;
 clear: both;
 height: 0;
 overflow: hidden;
 visibility: hidden;
}
img{
　　vertical-align: middle;
　　max-width:100%
}
.m-warp{
 width: 800px;
}
.item{
 margin-top: 20px;
}
.col{
 float: left;
}
.col-1{
 position: relative;
 width: 450px;
 height: 450px;
 outline: 1px solid #333;
}
.preview{
 display: inline-block;
}
.col-2{
 width: 300px;
 margin-left: 50px;
}
label{
 display: block;
 text-align: center;
 width: 100px;
 font-size: 16px;
 color: #fff;
 background-color: #888888;
 height: 30px;
 line-height: 30px;
}
.mask{
 position: absolute;
 z-index: 1;
 top:0;
 left: 0;
 bottom: 0;
 right: 0;
 background-color: rgba(0,0,0,.4);
}
.cvsMove{
 position: absolute;
 z-index: 2;
 outline: 2px dotted #333;
 cursor: move;
 display: none;
}

有了css和html的运行结果如下：

customerImg.js

var $ = require(&＃39;jquery&＃39;);
var ajax = require(&＃39;./ajax.js&＃39;);
var preview = require(&＃39;./preview.js&＃39;);
var shear = require(&＃39;./shear.js&＃39;);
/**
 * 自定义头像
 * @constructor
 */
function CustomerImg() {
 this.isSupport = null;
 this.previewBox = null;
 this.warp = null;
}
/**
 * 入口
 * @param warp 操作区域 jquery节点
 */
CustomerImg.prototype.start = function (warp) {
 var info,me,warpBox;
 me = this;
 this.isSupport = this.__isSupport();
 if(!this.isSupport) {
  info = $(&＃39;
你的浏览器不支持自定义头像，可更换高版本的浏览器自定义头像
&＃39;);
  $(&＃39;body&＃39;).html(info);
  return this;
 }
 //判断操作区域示范存在
 if(warp && warp.length > 0){
  this.warp = warp;
 }else{
  return this;
 }
 //预览
 preview.start(warp,shear.start.bind(shear,warp));
 this.previewBox = warp.find(&＃39;#preview&＃39;);
 //确定
 warp
  .find(&＃39;#submit&＃39;)
  .unbind(&＃39;click&＃39;)
  .on(&＃39;click&＃39;,me.__submit.bind(me));
};
/**
 * 提交
 * @private
 */
CustomerImg.prototype.__submit = function () {
 var cvsMove,data,fd;
 cvsMove = this.previewBox.find(&＃39;#cvsMove&＃39;);
 data = cvsMove[0].toDataURL(&＃39;image/jpg&＃39;,1);
 fd = {
  &＃39;customerImg&＃39;:data
 };
 ajax.upload(fd);
};
/**
 * 判断是否支持自定义头像
 * @returns {boolean}
 * @private
 */
CustomerImg.prototype.__isSupport = function () {
 var canvas,context;
 canvas= document.createElement(&＃39;canvas&＃39;);
 if(typeof FileReader === &＃39;function&＃39;&& canvas.getContext && canvas.toDataURL){
  return true;
 }else{
  return false;
 }
};
var customerImg = new CustomerImg();
module.exports = customerImg;

preview.js

/**
 * Created by star on 2017/3/7.
 */
var $ = require(&＃39;jquery&＃39;);
/**
 * 预览类
 * @constructor
 */
function Preview() {
 this.boxElem = null;
 this.callback = null;
 this.type = null;
}
/**
 * 入口
 * @param boxElem 操作区域
 * @param callback 预览结束的回调函数
 */
Preview.prototype.start = function (boxElem,callback) {
 var chooseFile,me;
 me = this;
 if(! boxElem || boxElem.length <= 0) return this;
 this.boxElem = boxElem;
 if(typeof callback === &＃39;function&＃39;){
  this.callback = callback;
 }
 if(this.__isSupport()){
  chooseFile = boxElem.find(&＃39;input[type="file"]&＃39;);
  chooseFile
   .on(&＃39;change&＃39;,me.fileChange.bind(me))
 }
};
/**
 * 选择图片的事件处理程序
 * @param event
 */
Preview.prototype.fileChange = function (event) {
 var target,reader,file,me,type;
 target = event.target;
 me = this;
 file = target.files[0];
 type = file.type;
 this.type = type;
 if(type !== &＃39;image/png&＃39; && type !== &＃39;image/jpg&＃39; && type !== &＃39;image/jpeg&＃39;){
  alert(&＃39;文件格式不正确&＃39;);
  return this;
 }
 reader = new FileReader();
 if(file){
  reader.readAsDataURL(file);
 }
 reader.Onload= function () {
  me.show(reader);
 }
};
/**
 * 显示从本地选择的图片
 * @param reader fileReader对象
 */
Preview.prototype.show = function (reader) {
 var preView,img,me;
 preView = this.boxElem.find(&＃39;#preview&＃39;);
 img = preView.find(&＃39;#preImg&＃39;);
 me = this;
 if(img.length <= 0){
  preView.append($(&＃39;&＃39;));
 }
 img = preView.find(&＃39;#preImg&＃39;);
 //确保图片加载完成后再执行回调
 img.on(&＃39;load&＃39;,function () {
  if(me.callback){
   me.callback(me.type);
  }
 });
 img.attr(&＃39;src&＃39;,reader.result);
};
/**
 * 是否支持预览
 * @returns {boolean}
 * @private
 */
Preview.prototype.__isSupport = function () {
 return typeof FileReader === &＃39;function&＃39;;
};
var preview = new Preview();
module.exports = preview;

shear.js

var $ = require(&＃39;jquery&＃39;);
//由于要使用jquery-ui，所以将$暴露到window上。
window.$ = $;
require(&＃39;./jquery-ui.min.js&＃39;);
/**
 * 切割
 * @constructor
 */
function Shear() {
 this.previewBox = null;
 this.cvsMove = null;
 this.maxW = 200;
 this.maxH = 200;
 this.thum = null;
 this.fileType = &＃39;image/jpeg&＃39;;
}
/**
 * 入口
 * @param previewBox 预览元素的父元素
 * @param fileType 裁剪的图片的类型 如：&＃39;image/jpg&＃39;
 * @returns {Shear}
 */
Shear.prototype.start = function (previewBox,fileType) {
 if(!arguments.length) return this;
 var me = this;
 this.previewBox = previewBox;
 if(fileType){
  this.fileType = fileType;
 }
 this.thum = this.previewBox.find(&＃39;#thum&＃39;);
 this.cvsMove = this.previewBox.find(&＃39;#cvsMove&＃39;);
 this.showCanvas();
 return this;

};
/**
 * 显示出canvas
 */
Shear.prototype.showCanvas = function () {
 var preImg,h,w,me,cvsH,cvsW,rateH,rateW,naturalH,naturalW,preview;
 me = this;
 preImg = this.previewBox.find(&＃39;#preImg&＃39;);
 preview = this.previewBox.find(&＃39;#preview&＃39;);
 naturalH = preImg[0].naturalHeight;
 naturalW = preImg[0].naturalWidth;
 //将canvas显示出来
 this.cvsMove.show();
 //将canvas置于（0,0）
 this.cvsMove
  .css({
   "left":&＃39;0&＃39;,
   &＃39;top&＃39;:&＃39;0&＃39;
  });
 h = preImg.height();
 w = preImg.width();
 //规定裁剪出的图片尺寸为200px*200px
 //要保证裁剪的图片不变形
 if(h 
ajax.js
var $ = require(&＃39;jquery&＃39;);
function Ajax() {

}
/**
 * 上传图片数据
 */
Ajax.prototype.upload = function (data) {
 $.ajax({
  type:&＃39;POST&＃39;,
  data:data,
  dataType:&＃39;json&＃39;,
  url:&＃39;/test/PHP/upload.php&＃39;,
  success:function (result) {
   if(result.status){
    location.reload();
   }else{
    alert(result.msg);
   }
  }
 });
};
var ajax = new Ajax();
module.exports = ajax;
最后在另一个文件中，调用customerImg对象的start方法
var $ = require(&＃39;jquery&＃39;);
var customerImg =require(&＃39;./customerImg.js&＃39;);
customerImg.start($(&＃39;#warp&＃39;));
webpack的配置文件如下：
var webpack = require(&＃39;webpack&＃39;);
module.exports = {
 entry:{
  &＃39;customerImg&＃39;:&＃39;./js/test.js&＃39;,
  &＃39;jQuery&＃39;:[&＃39;jquery&＃39;]
 },
 output:{
  filename:&＃39;[name].js&＃39;,
  library:&＃39;jQuery&＃39;,
  libraryTarget:&＃39;umd&＃39;
 },
 plugins:[
  new webpack.optimize.CommonsChunkPlugin({
   name:&＃39;jQuery&＃39;,
   filename:&＃39;jquery.js&＃39;
  })
 ]
};
 效果：
if(!empty($_POST) && isset($_POST[&＃39;customerImg&＃39;])){
 $img = $_POST[&＃39;customerImg&＃39;];
 $imgdata = explode(&＃39;,&＃39;, $img);
 $uniName = md5 ( uniqid ( microtime ( true ), true ) );
 $a = file_put_contents(&＃39;./../uploads/&＃39;.$uniName.&＃39;.jpg&＃39;, base64_decode($imgdata[1]));
}
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！