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

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

<div class="m-warp" id="warp"><div class="item"><input type="file" name="img" id="img" hidden><label for="img">選擇圖片</label></div><div class="item clearfix"><div class="col col-1"><div class="preview" id="preview"><div class="mask"></div><canvas class="cvsMove" id="cvsMove"></canvas></div></div><div class="thum col-2 col"><p>預覽</p><img src="" id="thum"><p class="f-text-l f-marTop-20"><button class="shear" id="submit">確定</button></p></div></div></div>

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的運行結果如下：

3.js代碼

customerImg.js

var $ = require('jquery'); var ajax = require('./ajax.js'); var preview = require('./preview.js'); var shear = require('./shear.js'); /*** 自定義頭像* @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 = $('<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)); }; /*** 提交* @private*/ CustomerImg.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}* @private*/ CustomerImg.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'); /*** 預覽類* @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 === 'function'){this.callback = callback;}if(this.__isSupport()){chooseFile = boxElem.find('input[type="file"]');chooseFile.on('change',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 !== '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}* @private*/ Preview.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'); /*** 切割* @constructor*/ function 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;}; /*** 顯示出canvas*/ Shear.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上的高度* @private*/ Shear.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])); }

?

轉載于:https://www.cnblogs.com/QxQstar/p/6607039.html

總結

以上是生活随笔為你收集整理的HTML5本地图片裁剪并上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。