HTML5本地圖片裁剪並上傳

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

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