Capricorncd-image-process

Image pre processing for upload (html5 + canvas)

解決圖片上傳前縮放到一定比例自動居中裁剪、等比縮放等。後期版本應該會加入手動設定裁剪位置及縮放比例。

Create by capricorncd / 2017-03-13

使用方法

<div id="imgWrapper">
    <!-- 圖片預覽容器 -->
</div>
<div>
    <button id="buttonId">選擇圖片</button
 
>
</div>

<script src="../build/capricorncd-image-process.min.js"></script>

<script>
    var capcdOptions = {
        // 選擇圖片按鈕id
        elm: 'buttonId',
        // 圖片預覽容器 id
        target: 'imgWrapper',
        // 裁剪圖片
        crop: true,
        // 裁剪尺寸
        width: 640,
        height: 640
 

    }
    var capcd = new CAPCD(capcdOptions, function (data) {
        console.log(data);
        alert('圖片檔案讀取、裁剪/等比縮放編碼成功，\n請詳見瀏覽器控制檯！');
        /**
         * data:待上傳的影象資料
         * 可將data寫入input[value]，利用form表單上傳
         * 或直接通過如騰訊雲介面直接上傳，如下：
         */
        /**
         * 騰訊雲上傳例項，詳見騰訊雲檔案上傳文件
         * https://www.qcloud.com/document/product/436/8095
         */
 

        // cos.uploadFile(
        //     successCallBack, // 上傳成功回撥函式
        //     errorCallBack, // 上傳失敗回撥函式
        //     progressCallBack, // 上傳進度回撥函式
        //     bucket, // 騰訊雲物件儲存bucket目錄
        //     '上傳成功後的檔名.jpg', // 騰訊雲目錄資料夾+上傳後的檔名
        //     data, // 影象檔案資料
        //     1 // 若bucket中有同名檔案，是否覆蓋
        // );
    });
</script>

使用效果圖

====

Options 引數

• elm: 'buttonId' 選擇圖片按鈕id(必須)

• target: 'imgWrapper' 圖片預覽容器id(可選)

• crop: true 是否裁剪圖片(可選)

為true時，必須同時設定width、height值大於0

裁剪規則: 圖片縮放到一定比列(即一邊等於設定值，另一邊超出設定值部分裁去)，居中裁剪

圖片尺寸與設定裁剪尺寸相同時，不做canvas重繪處理

• width: 500 裁剪或縮放寬度為500px(可選)

crop為false或不配置crop，則為縮放尺寸。

1.限制寬度縮放，則只需設定width值。

2.限制高度縮放，則只需設定height值。

3.若crop為false，同時設定了width/height值，則只按width縮放，忽略height

• height: 500 裁剪或縮放高度為500px(可選)

• type: 'jpg' 上傳圖片目標格式,預設jpg/png(可選)

1.不配置此項，則保留原圖片格式(bmp檔案會轉換成jpg, gif會轉換為png)。

2.配置後，將所有格式圖片轉換為配置格式。

3.可選值’jpg’, ‘png’。

4.HTMLCanvasElement.toDataURL()不支援’gif’, ‘bmp’，均輸出’png’格式