2. 程式人生 > >【jQuery外掛分享】Cropper——一個簡單方便的圖片裁剪外掛

【jQuery外掛分享】Cropper——一個簡單方便的圖片裁剪外掛

阿新 • • 發佈：2018-12-10

原文地址：https://segmentfault.com/a/1190000012344970

 

外掛介紹

這是一個我在寫以前的專案的途中發現的一個國人寫的jQuery影象裁剪外掛，當時想實現使用者資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少時間才看到了這個外掛，感覺功能挺全面，程式碼實現起來也挺簡單，再加上用的是Bootstrap，對移動端操作也有適配，於是就用了。現在稍微有點時間就記錄一下，方便以後再用的時候查閱。另外也有對應的js版本。

官方文件（英文）

相容性

相容所有支援了Canvas的瀏覽器（IE9+），一小部分功能例外，具體請檢視官方文件。

引數

viewMode

  • Type: Number
  • Default: 0
  • Options: 0,1,2,3

這個具體每個值對應的效果我也不是很清楚，推薦在上面的官方示例裡都試一試，我都是比較喜歡2。

dragMode

  • Type: String
  • Default: 'crop'

  • Options:

    • 'crop'： 在裁剪框外拖動滑鼠會生成一個新的裁剪框。
    • 'move'： 在裁剪框外拖動滑鼠會移動原圖。
    • 'none'： 在裁剪框外拖動滑鼠則什麼也不做。

aspectRatio

  • Type: Number
  • Default: NaN

這個是裁剪框的縱橫比，預設是不限制的。例如1:1的頭像就寫1,16:9可寫成16 / 9。

data

  • Type: Object
  • Default: null

The previous cropped data if you had stored, will be passed to setData

 method automatically.

（沒怎麼用過，都是直接用setData方法）

preview

  • Type: String (jQuery selector)
  • Default: ''

預覽圖的位置，用jQuery選擇器表示。

responsive

  • Type: Boolean
  • Default: true

在更改視窗大小後是否重新渲染cropper。

restore

  • Type: Boolean
  • Default: true

在更改視窗大小後是否恢復裁剪區域。

checkCrossOrigin

  • Type: Boolean
  • Default: true

檢查影象是否是跨域影象。（具體檢視官方文件）

checkOrientation

  • Type: Boolean
  • Default: true

（具體檢視官方文件）

modal

  • Type: Boolean
  • Default: true

非裁剪區域是否用黑罩遮蓋。

guides

  • Type: Boolean
  • Default: true

裁剪區域是否顯示虛線。

center

  • Type: Boolean
  • Default: true

裁剪區域正中央是否顯示+號。

highlight

  • Type: Boolean
  • Default: true

裁剪區域是否高亮顯示。

background

  • Type: Boolean
  • Default: true

是否顯示背景的黑白方格（類似PS裡透明圖層的顯示方式）。

autoCrop

  • Type: Boolean
  • Default: true

cropper初始化完成後是否自動顯示裁剪框

autoCropArea

  • Type: Number
  • Default: 0.8 (80% of the image)

自動顯示的裁剪框的大小。因此，數字應當在0~1之間。

movable

  • Type: Boolean
  • Default: true

是否允許移動原圖。（如果這裡填false那麼儘管dragMode的值是move，在裁剪框外拖動也不會移動原圖）

rotatable

  • Type: Boolean
  • Default: true

是否可以旋轉原圖。

scalable

  • Type: Boolean
  • Default: true

是否可以對原圖進行縱橫拉伸。

例如把原圖寬度拉長為原來的2倍或者拉長為原來的-1倍（即水平翻轉）。

zoomable

  • Type: Boolean
  • Default: true

是否可以對原圖進行縮小放大。

zoomOnTouch

  • Type: Boolean
  • Default: true

是否允許在移動端上使用雙指觸控縮放原圖。

zoomOnWheel

  • Type: Boolean
  • Default: true

是否允許使用滑鼠滾輪縮放原圖。

wheelZoomRatio

  • Type: Number
  • Default: 0.1

當使用滑鼠滾輪縮放時的比例。

cropBoxMovable

  • Type: Boolean
  • Default: true

是否允許移動裁剪框。

cropBoxResizable

  • Type: Boolean
  • Default: true

是否允許通過拖動裁剪框的邊框來調整裁剪框的大小。

toggleDragModeOnDblclick

  • Type: Boolean
  • Default: true

是否允許通過雙擊來在crop和move之間切換dragMode。

minContainerWidth

  • Type: Number
  • Default: 200

容器寬度最小值。

minContainerHeight

  • Type: Number
  • Default: 100

容器高度最小值。

minCanvasWidth

  • Type: Number
  • Default: 0

canvas（原圖）寬度最小值。

minCanvasHeight

  • Type: Number
  • Default: 0

canvas（原圖）高度最小值。

minCropBoxWidth

  • Type: Number
  • Default: 0

剪下框寬度最小值。

Note: This size is relative to the page, not the image.

minCropBoxHeight

  • Type: Number
  • Default: 0

剪下框高度最小值。

Note: This size is relative to the page, not the image.

ready

  • Type: Function
  • Default: null

A shortcut of the "ready" event.

cropstart

  • Type: Function
  • Default: null

A shortcut of the "cropstart" event.

cropmove

  • Type: Function
  • Default: null

A shortcut of the "cropmove" event.

cropend

  • Type: Function
  • Default: null

A shortcut of the "cropend" event.

crop

  • Type: Function
  • Default: null

A shortcut of the "crop" event.

zoom

  • Type: Function
  • Default: null

A shortcut of the "zoom" event.

常用方法

除了"setAspectRatio","replace"和"destroy"以外，所有的方法都要在ready後才能使用。這裡只介紹幾個常用的方法，全部的方法請到官方文件查閱。

方法的使用格式為

$().cropper('method',arg0,arg1,arg2,...);

crop()

手動顯示裁剪框。

$().cropper({
  autoCrop: false,
  ready: function () {
    // Do something here
    // ...

    // And then
    $(this).cropper('crop');
  }
});

reset()

恢復全部到初始狀態。

replace(url[, onlyColorChanged])

  • url:

    • Type: String
    • A new image url.

  • onlyColorChanged (optional):

    • Type: Boolean
    • If only change the color, not the size, then the cropper only need to change the srcs of all related images, not need to rebuild the cropper. This can be used for applying filters.
    • If not present, its default value is false.

替換cropper中的影象檔案，通常第二個引數不管。

destroy()

銷燬cropper，並且會移除img標籤的src屬性的值。

getCroppedCanvas([options])

  • options (optional):

    • Type: Object

    • Properties:

      • width: the destination width of the output canvas.
      • height: the destination height of the output canvas.
      • minWidth: the minimum destination width of the output canvas, the default value is 0.
      • minHeight: the minimum destination height of the output canvas, the default value is 0.
      • maxWidth: the maximum destination width of the output canvas, the default value is Infinity.
      • maxHeight: the maximum destination height of the output canvas, the default value is Infinity.
      • fillColor: a color to fill any alpha values in the output canvas, the default value is transparent.
      • imageSmoothingEnabled: set to change if images are smoothed (true, default) or not (false).
      • imageSmoothingQuality: set the quality of image smoothing, one of "low" (default), "medium", or "high".

  • (return value):

    • Type: HTMLCanvasElement
    • A canvas drawn the cropped image.

  • Notes:

    • 輸出的canvas的縱橫比會自動適應於裁剪框的縱橫比.
    • 如果打算得到JPEG影象，那麼應該先設定fillColor引數，否則裁剪後的透明部分預設會由黑色填充。

  • Browser support:

得到裁剪到的影象的canvas，如果沒有裁剪，那麼就返回的是整個原圖影象的canvas。

這是最重要的一個方法，通過這個方法就可以得到裁剪後的影象，再使用toDataURL()得到base64 dataURL（不指定格式的話會是png格式）或者toBlob()得到Blob,然後就可以很輕鬆地將圖片上傳至伺服器上或者顯示在某個img標籤中了。例如：

// 轉換為png格式的dataURL
var dataURL = $().cropper('getCroppedCanvas', {
    width:100,
    height:100
}).toDataURL('image/png');

// 轉換為Blob後顯示在img標籤中
var URL = window.URL || window.webkitURL;
$().cropper('getCroppedCanvas', {
    width:100,
    height:100
}).toBlob(function (blob) {
    $().attr('src',URL.createObjectURL(blob));
});

簡單例項

在頁面直接使用cropper

接下來只是實現一個簡單的功能：網頁中可以上傳圖片，然後對圖片進行裁剪，點選確定後會顯示出裁剪後的圖片。

程式碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>裁剪圖片</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
        .row{
            margin-bottom: 5px;
        }
        #photo {
            max-width: 100%;
        }
        .img-preview {
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
        button {
            margin-top:10px;
        }
        #result {
            width: 150px;
            height: 150px;
        }
</style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <label for="input" class="btn btn-danger" id="">
            <span>選擇圖片</span>
            <input type="file" id="input" class="sr-only">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <img src="" id="photo">
        </div>
        <div class="col-sm-2">
            <div>
                <p>
                    預覽(100*100)：
                </p>
                <div class="img-preview">
                </div>
            </div>
            <button class="btn btn-primary" onclick="crop()">裁剪圖片</button>
            <div>
                <br/>
                <p>
                    結果：
                </p>
                <img src="" alt="裁剪結果" id="result">
            </div>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
        // 修改自官方demo的js
        var initCropper = function (img, input){
            var $image = img;
            var options = {
                aspectRatio: 1, // 縱橫比
                viewMode: 2,
                preview: '.img-preview' // 預覽圖的class名
            };
            $image.cropper(options);
            var $inputImage = input;
            var uploadedImageURL;
            if (URL) {
                // 給input新增監聽
                $inputImage.change(function () {
                    var files = this.files;
                    var file;
                    if (!$image.data('cropper')) {
                        return;
                    }
                    if (files && files.length) {
                        file = files[0];
                        // 判斷是否是影象檔案
                        if (/^image\/\w+$/.test(file.type)) {
                            // 如果URL已存在就先釋放
                            if (uploadedImageURL) {
                                URL.revokeObjectURL(uploadedImageURL);
                            }
                            uploadedImageURL = URL.createObjectURL(file);
                            // 銷燬cropper後更改src屬性再重新建立cropper
                            $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                            $inputImage.val('');
                        } else {
                          window.alert('請選擇一個影象檔案！');
                      }
                  }
              });
            } else {
                $inputImage.prop('disabled', true).addClass('disabled');
            }
        }
        var crop = function(){
            var $image = $('#photo');
            var $target = $('#result');
            $image.cropper('getCroppedCanvas',{
                width:300, // 裁剪後的長寬
                height:300
            }).toBlob(function(blob){
                // 裁剪後將圖片放到指定標籤
                $target.attr('src', URL.createObjectURL(blob));
            });
        }
        $(function(){
            initCropper($('#photo'),$('#input'));
        });
    </script>
</body>
</html>

剪下圖片

在bootstrap模態框中使用cropper

雖然在模態框中可以像上面一樣使用cropper，甚至我以前寫的專案也是跟上面一樣，但是這次整理的時候突然發現了一個bug：當隱藏模態框後調整瀏覽器大小（甚至按f12），再開啟模態框後cropper的容器會改變，導致難以使用。於是，我在GitHub中翻找了issue，在官方的example中找到了對應的解決方法。但其實這個解決方法也是一種暴力解法，即模態框隱藏後銷燬cropper，開啟後重新建立cropper，可能會有別的方法，因為不確定會不會有別的bug，所以暫時還是用官方的方法比較好。

程式碼如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>上傳頭像</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
    body{
        text-align: center;
    }
    #user-photo {
        width:300px;
        height:300px;
        margin-top: 10px;
    }
    #photo {
        max-width:100%;
        max-height:350px;
    }
    .img-preview-box {
        text-align: center;
    }
    .img-preview-box > div {
        display: inline-block;;
        margin-right: 10px;
    }
    .img-preview {
        overflow: hidden;
    }
    .img-preview-box .img-preview-lg {
        width: 150px;
        height: 150px;
    }
    .img-preview-box .img-preview-md {
        width: 100px;
        height: 100px;
    }
    .img-preview-box .img-preview-sm {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">開啟</button><br/>
<div class="user-photo-box">
    <img id="user-photo" src="">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title text-primary">
            <i class="fa fa-pencil"></i>
                        更換頭像
            </h4>
        </div>
        <div class="modal-body">
            <p class="tip-info text-center">
                未選擇圖片
            </p>
            <div class="img-container hidden">
                <img src="" alt="" id="photo">
            </div>
            <div class="img-preview-box hidden">
                <hr>
                <span>150*150:</span>
                <div class="img-preview img-preview-lg">
                </div>
                <span>100*100:</span>
                <div class="img-preview img-preview-md">
                </div>
                <span>30*30:</span>
                <div class="img-preview img-preview-sm">
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <label class="btn btn-danger pull-left" for="photoInput">
            <input type="file" class="sr-only" id="photoInput" accept="image/*">
            <span>開啟圖片</span>
            </label>
            <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button>
            <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var initCropperInModal = function(img, input, modal){
        var $image = img;
        var $inputImage = input;
        var $modal = modal;
        var options = {
            aspectRatio: 1, // 縱橫比
            viewMode: 2,
            preview: '.img-preview' // 預覽圖的class名
        };
        // 模態框隱藏後需要儲存的資料物件
        var saveData = {};
        var URL = window.URL || window.webkitURL;
        var blobURL;
        $modal.on('show.bs.modal',function () {
            // 如果開啟模態框時沒有選擇檔案就點選“開啟圖片”按鈕
            if(!$inputImage.val()){
                $inputImage.click();
            }
        }).on('shown.bs.modal', function () {
            // 重新建立
            $image.cropper( $.extend(options, {
                ready: function () {
                    // 當剪下介面就緒後，恢復資料
                    if(saveData.canvasData){
                        $image.cropper('setCanvasData', saveData.canvasData);
                        $image.cropper('setCropBoxData', saveData.cropBoxData);
                    }
                }
            }));
        }).on('hidden.bs.modal', function () {
            // 儲存相關資料
            saveData.cropBoxData = $image.cropper('getCropBoxData');
            saveData.canvasData = $image.cropper('getCanvasData');
            // 銷燬並將圖片儲存在img標籤
            $image.cropper('destroy').attr('src',blobURL);
        });
        if (URL) {
            $inputImage.change(function() {
                var files = this.files;
                var file;
                if (!$image.data('cropper')) {
                    return;
                }
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
    
                        if(blobURL) {
                            URL.revokeObjectURL(blobURL);
                        }
                        blobURL = URL.createObjectURL(file);
    
                        // 重置cropper，將影象替換
                        $image.cropper('reset').cropper('replace', blobURL);
    
                        // 選擇檔案後，顯示和隱藏相關內容
                        $('.img-container').removeClass('hidden');
                        $('.img-preview-box').removeClass('hidden');
                        $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');
                        $('#changeModal .tip-info').addClass('hidden');
    
                    } else {
                        window.alert('請選擇一個影象檔案！');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).addClass('disabled');
        }
    }

    var sendPhoto = function(){
        $('#photo').cropper('getCroppedCanvas',{
            width:300,
            height:300
        }).toBlob(function(blob){
            // 轉化為blob後更改src屬性，隱藏模態框
            $('#user-photo').attr('src',URL.createObjectURL(blob));
            $('#changeModal').modal('hide');
        });
    }

    $(function(){
        initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));
    });
</script>
</body>
</html>

開啟模態框

開啟圖片

使用cropper來上傳圖片到伺服器

由於cropper可以得到兩種裁剪後圖片的資料（即blob和dataURL），所以對應的上傳到後臺也會有兩種方法，在這裡我只寫一種使用ajax上傳base64 dataURL的，另一種方法如果有興趣，可以自己嘗試。

頁面中，將上面的sendPhoto方法改為：

var sendPhoto = function () {
    // 得到PNG格式的dataURL
    var photo = $('#photo').cropper('getCroppedCanvas', {
        width: 300,
        height: 300
    }).toDataURL('image/png');

    $.ajax({
        url: '上傳地址', // 要上傳的地址
        type: 'post',
        data: {
            'imgData': photo
        },
        dataType: 'json',
        success: function (data) {
            if (data.status == 0) {
                // 將上傳的頭像的地址填入，為保證不載入快取加個隨機數
                $('.user-photo').attr('src', '頭像地址?t=' + Math.random());
                $('#changeModal').modal('hide');
            } else {
                alert(data.info);
            }
        }
    });
}

後臺中，Java的主要程式碼如下：（使用了jdk8的Base64,，如果是低版本請自行替換）

    /**
     * 將Base64位編碼的圖片進行解碼，並儲存到指定目錄
     */
    public static void decodeBase64DataURLToImage(String dataURL, String path, String imgName) throws IOException {
        // 將dataURL開頭的非base64字元刪除
        String base64 = dataURL.substring(dataURL.indexOf(",") + 1);
        FileOutputStream write = new FileOutputStream(new File(path + imgName));
        byte[] decoderBytes = Base64.getDecoder().decode(base64);
        write.write(decoderBytes);
        write.close();
    }

小結

cropper能做到的事情還很多，這裡只是簡單使用了一下，更多功能可以在有想法的再研究下。

這是針對以前專案用的cropper的一個整理，結果因為當初沒有看官方例子，途中發現了在模態框中使用的一個bug，以後會注意這方面。另外，整理這部分資料時也參考了不少的網路資料，在這裡就不一一記錄了。

最後，由於本人能力有限，若發現錯誤希望能指出，本人會及時改正，非常感謝。

相關推薦

【jQuery外掛分享】Cropper——一個簡單方便的圖片裁剪外掛

原文地址：https://segmentfault.com/a/1190000012344970   外掛介紹 這是一個我在寫以前的專案的途中發現的一個國人寫的jQuery影象裁剪外掛，當時想實現使用者資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少

【jQuery插件分享】Cropper——一個簡單方便的圖片裁剪插件

spa jdk 上傳 bject bootstra box 調整 inf doc 原文:https://segmentfault.com/a/1190000012344970 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶

【Java編程】建立一個簡單的JDBC連接-Drivers, Connection, Statement and PreparedStatement

code ava 語句 ole man for out 讀取 drop 本blog提供了一個簡單的通過JDBC驅動建立JDBC連接例程，並分別通過Statement和PreparedStatement實現對數據庫的查詢。在下一篇blog中將重點比較Statement與P

【外掛分享】簡訊如何對接TPShop，簡訊外掛

找到了一家不錯的簡訊外掛，有需要對接的可以檢視學習，在這邊分享一下，有需要的可以詳細看看，瞭解一下。http://www.ihuyi.com/ 外掛說明本外掛系互億無線針對TPSHOP簡訊外掛開發，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請仔細核對修改。 功能介紹手機

【EJB學習筆記】——建立一個簡單的EJB應用

　　這裡建立一個簡單的EJB應用，結構如下： 　　 　　EJB_DEMO專案型別為EJB Project，是需要部署到JBoss上的EJB應用。EJB_DEMO_CLIENT專案型別為普通的Java

【布隆過濾器】實現一個簡單的布隆過濾器

原理 布隆過濾器（Bloom Filter）是1970年由布隆提出的。它實際上是一個很長的二進位制向量和一系列隨機對映函式。布隆過濾器可以用於檢索一個元素是否在一個集合中。它的優點是空間效率和查詢時間都遠遠超過一般的演算法，缺點是有一定的誤識別率和刪除困難。

TP5+cropper-master上傳圖片裁剪外掛

一、附件下載 CropAvatar.php //放在 extend\org  //這是自己稍微修改過。 //如果遇到 exif_imagetype 錯誤，需要開啟 p

【jQuery插件】使用cropper實現簡單的頭像裁剪並上傳

contex 高亮 leo 通過 時也 可能 現在 substring ica 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶資料的頭像上傳功能，並且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少時間才看到了這個插件

【JQuery Easy UI】後臺管理系統的簡單佈局分享

重要說明：本博已遷移到 石佳劼的部落格，有疑問請到 文章新地址 留言！！！ 最近做的一個簡單的後臺管理系統，其中用到了JQuery Easy UI框架，對於擼主這種把控制元件能擺整齊就謝天謝地的碼農

【bzoj5016】[Snoi2017]一個簡單的詢問 莫隊算法

bsp math 輸出 load 存在 不能 int 註意 sort 題目描述 給你一個長度為N的序列ai，1≤i≤N和q組詢問，每組詢問讀入l1,r1,l2,r2，需輸出 get(l,r,x)表示計算區間[l,r]中，數字x出現了多少次。 輸入 第

【外掛分享】簡訊驗證碼對接TPShop，簡訊功能

找到了一家不錯的簡訊外掛，有需要對接的可以檢視學習，在這邊分享一下，有需要的可以詳細看看，瞭解一下。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對TPSHOP簡訊外掛開發，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請仔細核對修改。 功能介紹

Qt【WebSocket】建立一個簡單的websocket連線

1、使用說明 pro檔案中： QT += websockets C++類檔案中： #include <QWebSocket> 2、客戶端的demo 該demo實現的功能： 1、建立webSocket連線； 2、連線中斷後，自動發起重連，週期為3秒。 這裡新建一個類，類

【外掛分享】簡訊開發，簡訊實現，簡訊外掛小京東V4.2外掛

找到了一家不錯的簡訊外掛，有需要對接的可以檢視學習，在這邊分享一下，有需要的可以詳細看看，瞭解一下。http://www.ihuyi.com/ 外掛說明安裝前請詳細閱讀該說明。本外掛基於 小京東V4.2單倉 分銷版本,使用的頁面模板是小京東。如果您的小京東不是v4.2版本或者是二次開發過的，建議手動修改程式

【外掛分享】如何實現EmPireCMS帝國系統簡訊驗證碼功能

找到了一家不錯的簡訊外掛，有需要對接的可以檢視學習，在這邊分享一下，有需要的可以詳細看看，瞭解一下。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對EmpireCMS v7.2 utf-8版本開發，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請仔

【轉】寫一個簡單的爬蟲來批量爬取新浪網的新聞

工具：Anaconda 先進入該頁，新浪新聞：http://news.sina.com.cn/china/ 往下翻，找到這樣的最新訊息 先爬取單個頁面的資訊：（隨便點一個進去）， 該新聞網址：http://news.sina.com.cn/c/nd/2018-06-08/doc-ihcscwxa1

【外掛分享】簡訊驗證碼怎麼對接PHPSHE商城系統

在互億無線簡訊平臺找到一個外掛，在這邊分享一下，有需要可以瞭解，比自己開發要容易很多哦。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對phpsheV1.6簡訊外掛開發，外掛內的所有檔案除ihuyi.php均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請仔細核對修

【外掛分享】簡訊如何對接得推校園O2O

在互億無線簡訊平臺找到一個外掛，在這邊分享一下，有需要可以瞭解，比自己開發要容易很多哦。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對得推校園O2O簡訊外掛開發，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請仔細核對修改。

【外掛分享】簡訊對接74cms_v4.1_騎士人才系統，簡訊驗證碼功能

在互億無線簡訊平臺找到一個外掛，在這邊分享一下，有需要可以瞭解，比自己開發要容易很多哦。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對74cms_v4.1開發，請按以下說明進行安裝，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，

【外掛分享】 簡訊對接芝麻樂眾籌系統，簡訊驗證碼功能

在互億無線簡訊平臺找到一個外掛，在這邊分享一下，有需要可以瞭解，比自己開發要容易很多哦。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對芝麻樂眾籌系統開發，請按以下說明進行安裝，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛之前，請

【外掛分享】簡訊對接PhpYun人才系統，簡訊驗證碼

對接簡訊的時候發現一家簡訊公司，有些不錯的簡訊驗證碼的外掛，對接起來挺方便的，有需求的可以看一下。http://www.ihuyi.com/ 外掛說明 本外掛系互億無線針對phpyun開發，請按以下說明進行安裝，外掛內的所有檔案均為對原檔案的修改，如果你的系統經過二次開發，安裝本外掛