最近做了一個項目，這個項目中需要實現的一個功能是：用戶自定義頭像（用戶在本地選擇一張圖片，在本地將圖片裁剪成滿足系統要求尺寸的大小）。這個功能的需求是：頭像最初剪切為一個正方形。如果選擇的圖片小于規定的頭像要求尺寸，那么這整張圖片都會作為頭像。如果大于規定的尺寸，那么用戶可以選擇要裁剪的區域。用戶點擊確定按鈕，就將裁剪得到的圖片數據發送到服務器，在后端將圖片數據保存成一個文件。

要完成上述功能，涉及到的知識有：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代碼

 p >
2.CSS代碼
.clearfix:after{ content:  display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; 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的運行結果如下：
3.js代碼
customerImg.js
var $ = require( jquery var ajax = require( ./ajax.js var preview = require( ./preview.js var shear = require( ./shear.js  * 自定義頭像 * @constructorfunction 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 = $( p 你的瀏覽器不支持自定義頭像，可更換高版本的瀏覽器自定義頭像 /p  $( body ).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( #preview  //確定 warp .find( #submit ) .unbind( click ) .on( click ,me.__submit.bind(me)); * 提交 * @privateCustomerImg.prototype.__submit = function () { var cvsMove,data,fd; cvsMove = this.previewBox.find( #cvsMove  data = cvsMove[0].toDataURL( image/jpg ,1); fd = { customerImg :data ajax.upload(fd); * 判斷是否支持自定義頭像 * @returns {boolean} * @privateCustomerImg.prototype.__isSupport = function () { var canvas,context; canvas= document.createElement( canvas  if(typeof FileReader === function 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( jquery  * 預覽類 * @constructorfunction 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 === function ){ this.callback = callback; if(this.__isSupport()){ chooseFile = boxElem.find( input[type= file ]  chooseFile .on( change ,me.fileChange.bind(me)) * 選擇圖片的事件處理程序 * @param eventPreview.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 !== image/png type !== image/jpg type !== image/jpeg ){ alert( 文件格式不正確  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( #preview  img = preView.find( #preImg  me = this; if(img.length = 0){ preView.append($( img id= preImg  img = preView.find( #preImg  //確保圖片加載完成后再執行回調 img.on( load ,function () { if(me.callback){ me.callback(me.type); img.attr( src ,reader.result); * 是否支持預覽 * @returns {boolean} * @privatePreview.prototype.__isSupport = function () { return typeof FileReader === function var preview = new Preview();module.exports = preview;
shear.js
var $ = require( jquery //由于要使用jquery-ui，所以將$暴露到window上。window.$ = $;require( ./jquery-ui.min.js  * 切割 * @constructorfunction Shear() { this.previewBox = null; this.cvsMove = null; this.maxW = 200; this.maxH = 200; this.thum = null; this.fileType = image/jpeg  * 入口 * @param previewBox 預覽元素的父元素 * @param fileType 裁剪的圖片的類型 如： image/jpg  * @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( #thum  this.cvsMove = this.previewBox.find( #cvsMove  this.showCanvas(); return this; * 顯示出canvasShear.prototype.showCanvas = function () { var preImg,h,w,me,cvsH,cvsW,rateH,rateW,naturalH,naturalW,preview; me = this; preImg = this.previewBox.find( #preImg  preview = this.previewBox.find( #preview  naturalH = preImg[0].naturalHeight; naturalW = preImg[0].naturalWidth; //將canvas顯示出來 this.cvsMove.show(); //將canvas置于（0,0） this.cvsMove .css({ left : 0 , top : 0  h = preImg.height(); w = preImg.width(); //規定裁剪出的圖片尺寸為200px*200px //要保證裁剪的圖片不變形 if(h this.maxH || w this.maxW){ this.cvsMove[0].width = cvsW = Math.min(h,w); this.cvsMove[0].height = cvsH = Math.min(h,w); }else{ this.cvsMove[0].width= cvsW = this.maxW; this.cvsMove[0].height= cvsH = this.maxH; rateH = h/naturalH; rateW = w/naturalW; this.__drawImg(preImg,0,0,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH); //使用jquery-ui中的功能使canvas可以移動 this.cvsMove.draggable( containment: parent , drag:function (event,ui) { var left,top; left = ui.position.left; top = ui.position.top; //canvas每次移動都有從新繪制圖案 me.__drawImg(preImg,left/rateW,top/rateH,cvsW/rateW,cvsH/rateH,0,0,cvsW,cvsH); * 在canvas上顯示圖片 * @param myImg 要顯示的圖片節點 * @param sx 圖片的起點在原圖片上的x坐標 * @param sy 圖片的起點在原圖上的y坐標 * @param sW 在原圖上的寬度 * @param sH 在原圖上的高度 * @param dx 起點在canvas上的x坐標 * @param dy 起點在canvas上的y坐標 * @param dW 在canvas上的寬度 * @param dH 在canvas上的高度 * @privateShear.prototype.__drawImg = function (myImg,sx,sy,sW,sH,dx,dy,dW,dH) { var cxt,thum,me; me = this; cxt = this.cvsMove[0].getContext( 2d  cxt.drawImage(myImg[0],sx,sy,sW,sH,dx,dy,dW,dH); thum = this.thum; //將canvas上的圖案顯示到右側 thum .attr( src ,this.cvsMove[0].toDataURL(me.fileType,1)) .width(this.maxW) .height(this.maxH)var shear = new Shear();module.exports = shear;
ajax.js
var $ = require( jquery function Ajax() { * 上傳圖片數據Ajax.prototype.upload = function (data) { $.ajax({ type: POST , data:data, dataType: json , url: /test/PHP/upload.php , success:function (result) { if(result.status){ location.reload(); }else{ alert(result.msg);var ajax = new Ajax();module.exports = ajax;
最后在另一個文件中，調用customerImg對象的start方法
var $ = require( jquery var customerImg =require( ./customerImg.js customerImg.start($( #warp 
webpack的配置文件如下：
var webpack = require( webpack module.exports = { entry:{ customerImg : ./js/test.js , jQuery :[ jquery ] output:{ filename: [name].js , library: jQuery , libraryTarget: umd  plugins:[ new webpack.optimize.CommonsChunkPlugin({ name: jQuery , filename: jquery.js };
 效果：
4.php代碼
if(!empty($_POST) isset($_POST[ customerImg ])){ $img = $_POST[ customerImg  $imgdata = explode( , , $img); $uniName = md5 ( uniqid ( microtime ( true ), true ) ); $a = file_put_contents( ./../uploads/ .$uniName. .jpg , base64_decode($imgdata[1]));}
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
使用HTML5實現網頁音樂播放器
Express使用html模板的代碼分析
以上就是HTML5和JS實現本地圖片裁剪并上傳功能的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。