jQueryphotoClip-圖片上傳並裁剪

公司年前要推一個製作新年賀卡的H5活動頁，開發過程中踩了幾個坑，今天總結分享一下。

最初方案：將用戶圖片上傳服務器，返回url顯示在頁面上，點擊生成賀卡按鈕，將url以及賀卡暱稱、祝福語傳給接口，後臺返回一張生成賀卡圖片url,顯示在頁面上，用戶可長按保存。

出現的問題：ios多個型號的手機出現拍照或者相冊上傳的圖片會自動旋轉90度，用戶不可自己選擇裁剪區域。

最終方案：使用jQueryphotoClip圖片剪裁插件，用戶可手動縮放、旋轉圖片，並選擇裁剪區域。

使用要點：

1.引入依賴的插件（ 注意引入的先後順序 ）

<script type='text/javascript' src='../js/photoClip/hammer.js'></script> 
<script type='text/javascript' src='../js/photoClip/iscroll-zoom.js'></script> 
<script type='text/javascript' src='../js/photoClip/lrz.all.bundle.js'></script>
<script type='text/javascript' src='../js/photoClip/jquery.photoClip.js'></script>

2.參數配置

<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的寬和高組成的數組。默認值爲[260,260]
    outputSize: [640, 640], // 輸出圖像的寬和高組成的數組。默認值爲[0,0]，表示輸出圖像原始大小
    //outputType: "jpg", // 指定輸出圖片的類型，可選 "jpg" 和 "png" 兩種種類型，默認爲 "jpg"
    file: "#file", // 上傳圖片的<input type="file">控件的選擇器或者DOM對象
    view: "#view", // 顯示截取後圖像的容器的選擇器或者DOM對象
    ok: "#clipBtn", // 確認截圖按鈕的選擇器或者DOM對象
    loadStart: function(file) {}, // 開始加載的回調函數。this指向 fileReader 對象，並將正在加載的 file 對象作爲參數傳入
    loadComplete: function(src) {}, // 加載完成的回調函數。this指向圖片對象，並將圖片地址作爲參數傳入
    loadError: function(event) {}, // 加載失敗的回調函數。this指向 fileReader 對象，並將錯誤事件的 event 對象作爲參數傳入
    clipFinish: function(dataURL) {}, // 裁剪完成的回調函數。this指向圖片對象，會將裁剪出的圖像數據DataURL作爲參數傳入
});
</script>

3.裁剪成功

裁剪成功後，可在loadComplete回調函數中拿到src參數（base64格式的圖片地址），對裁剪後的圖片再做進一步操作。

 

本次開發過程中，最初設置outputSize尺寸爲後臺生成圖片時所需的圖片大小（生成圖片時，圖片大小要固定，不能進行縮放），後因爲圖片模糊，將尺寸設置爲[0,0]，然後用PHP將圖片壓縮至所需尺寸，再將祝福語、暱稱、用戶圖共同合成賀卡圖片。代碼如下：

public function getResult()
    {
        $img_url = _pv('img_url') ? _pv('img_url') : "";
        $name    = _pv('name')    ? _pv('name')    : "";
        $content = _pv('content') ? _pv('content') : "";
        if (!$img_url || !$name || !$content){
            _ars("缺少參數",false);
        }
        if (preg_match('/^(data:\s*image\/(\w+);base64,)/',$img_url,$res)){
            $extension = $res[2];
        }else{
            $extension = "jpg";
        }
        if (strstr($img_url,",")){
            $image = explode(',',$img_url);
            $image = $image[1];
        }
        $filename   = "/tmp/".time().rand(0,200).".".$extension;
        $bgImgPath  = "./kz-element/newyearcard.jpg";    //背景圖地址
        $font       = './kz-element/sybold.ttf';
        $font2      = './kz-element/syhtnormal.ttf';
        $source  = fopen($filename,'w');
        $saveRes = fwrite($source,base64_decode($image));
        fclose($source);
        if (!$saveRes){
            _ars("生成失敗,請稍後重試~",false);
        }

        //對用戶上傳的圖片進行大小處理
        $res = $this->resizeImg($filename,510,302);
        if (!$res){
            _ars("生成失敗,請稍後重試~",false);
        }

        $im = createImgByType($bgImgPath);
        $user_im = createImgByType($filename);
        if (!$im || !$user_im){
            _ars("生成失敗,請稍後重試~",false);
        }

        //圖片放置位置和大小
        $marginRight  = 123;
        $marginBottom = 623;
        $width  = 510;
        $height = 302;

        imagecopymerge($im,$user_im,imagesx($im) - $width - $marginRight,imagesy($im) - $height - $marginBottom,0,0,$width,$height,100);  //放圖完畢

        //寫字
        $to = $this->filterEmoji($name)."祝您 :";
        $color = imagecolorallocate($im,156,0,14);
        imagettftext($im, 22, 0, 118, 772, $color, $font,$to);

        $content = $this->filterEmoji($content);
        mb_strlen($content) > 54 && $content = mb_substr($content,0,54) . "...";
        $length = mb_strlen($content);
        $block  = (int)($length / 19) + 1;  //19個字一行
        for ($i = 0;$i < $block;$i++){
            $text = mb_substr($content,$i*19,19);
            imagettftext($im, 20, 0, 118, 825 + $i*32, $color, $font2,$text);
        }

        $resFileName = md5(time()).".png";
        $respath = '/opt/htdocs/upload/goodsrcode/'.$resFileName;
        $res = imagepng($im,$respath);
        imagedestroy($im);
        imagedestroy($user_im);
        @unlink($filename);
        if ($res){
            _ars(SUPERMAN_IMG_HOST.'/upload/goodsrcode/'.$resFileName,true);
        }
        _ars("error",false);

    }

    public function resizeImg($path,$width = 510,$height = 302)
    {
        $imgInfo = getimagesize($path);
        $im = createImgByType($path);
        if (empty($imgInfo) || !$im){
            return false;
        }
        $img_width  = $imgInfo[0];
        $img_height = $imgInfo[1];
        $source_ratio = $img_width/$img_height;
        $src_width = $src_height = 0;
        $des_height = $height;

        //計算縮放比例
        if(($width/$img_width)>($height/$img_height)){
            $b=$height/$img_height;
        }else{
            $b=$width/$img_width;
        }
        //計算出縮放後的尺寸
        $nw=floor($img_width*$b);
        $nh=floor($img_height*$b);
        $temp_img = imagecreatetruecolor($nw , $nh);//創建畫布
        $white = imagecolorallocate($temp_img, 255, 255, 255);
        imagefill($temp_img, 0, 0, $white);
        imagecopyresampled($temp_img,$im,0,0,0,0,$nw,$nh,$img_width,$img_height);
        $res = buildImgType($temp_img,$imgInfo[2],$path);
        imagedestroy($im);
        return true;
    }

更多jQueryphotoClip相關內容：http://www.jq22.com/jquery-info7428

新年賀卡H5活動頁面：https://m.douguo.com/activity/newyearcard