微信JSSDK 實現打開攝像頭拍照再將相片保存到服務器

在微信端打開手機攝像頭拍照，將拍照圖片保存到服務器上須要使用到微信的JSSDK接口，主要使用到了拍照或從手機相冊中選圖接口（chooseImage）,上傳圖片接口（uploadImage）

參考資料：

https://mp.weixin.qq.com/wiki...

https://www.easywechat.com/do...

一：引入微信js

<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

二：經過config接口注入權限驗證配置

wx.config(<?php
    echo Yii::$app->wechat->js->config([
        'chooseImage',
        'uploadImage',
        'downloadImage'
    ])
    ?>
);

三：微信端拍照接口

wx.chooseImage({
    count: 1, // 默認9
    sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
    sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
    success: function (res) {
        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
    }
});

四：將照片上傳到微信服務器接口

wx.uploadImage({
    localId: localIds, // 須要上傳的圖片的本地ID，由chooseImage接口得到
    isShowProgressTips: 1, // 默認爲1，顯示進度提示
    success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務器端ID
    },
    fail: function() {
       //上傳圖片到微信服務器失敗
        return false;
    }
});

五：將微信服務器的圖片下載到本地服務器

前端：

//url表示php接口地址
//serverId表示圖片的服務器端ID
$.post(url, {'media_id':serverId}, function(data) {
    if (data.type == 'success') {
       //上傳成功
        
    } else {
        //上傳失敗
        
    }
});

php(接口)

public function actionUpload()
{
    Yii::$app->response->format = Response::FORMAT_JSON;
    $request = Yii::$app->request;
    $mediaId = $request->post('media_id');
    if (empty($mediaId)) {
        return [
            'type' => 'error',
            'message' => '參數錯誤！'
        ];
    }
    //臨時素材
    $temporary = Yii::$app->wechat->material_temporary;
    //建立服務器目錄
    $path = 'wechat/' . date('Ymd',time()) . '/';
    $fullPath = Yii::getAlias('@webroot') . '/' . $path;
    if (!is_dir($fullPath)) {
        FileHelper::createDirectory($fullPath);
    }
    //設置圖片名稱
    $fileName = Yii::$app->getSecurity()->generateRandomString() . '-' . date('His',time());
    //將服務器端的臨時素材下載到本地服務器
    $temporary->download($mediaId, $fullPath, $fileName);
    return [
        'type' => 'success',
        'url' => $path . $fileName . '.jpg',
    ];
}

前端代碼整合

<!--引入微信js-->
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
<button class="btn">點擊</button>
<img id="imgTarget" src="" alt="">
<?php
$url = \yii\helpers\Url::to(['/wechat/upload']);
$wxConfig = Yii::$app->wechat->js->config([
    'chooseImage',
    'uploadImage',
    'downloadImage'
]);
$JS = <<<JS
//注入權限驗證配置
wx.config(
    {$wxConfig}
);
$('.btn').click(function () {
        wx.ready(function(){
            wx.chooseImage({
                count: 1, // 默認9
                sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
                sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
                    uploadImage(localIds.toString())
                }
            });
        })
    });
    /**
     * 上傳圖片到微信服務器
     */
    function uploadImage(localIds) {
        wx.uploadImage({
            localId: localIds, // 須要上傳的圖片的本地ID，由chooseImage接口得到
            isShowProgressTips: 1, // 默認爲1，顯示進度提示
            success: function (res) {
                var serverId = res.serverId; // 返回圖片的服務器端ID
                downloadImage(serverId.toString());
            },
            fail: function() {
               //上傳圖片到微信服務器失敗
                alert('上傳圖片到微信服務器失敗');
                return false;
            }
        });
    }
    /**
     * 將微信服務端的圖片下載到本地服務器
     */
    function downloadImage(serverId) {
        //url表示php接口地址
        //serverId表示圖片的服務器端ID
        $.post(url, {'media_id':serverId}, function(data) {
            if (data.type == 'success') {
               //上傳成功
                alert(data.url);
            } else {
                //上傳失敗
                alert(data.message)
            }
        });
    }
JS;
$this->registerJs($JS);
?>

根據如上代碼就能夠實現微信端打開攝像頭拍照再將相片保存到服務器功能