這篇文章主要介紹了微信JSSDK怎么實現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、六合ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的六合網(wǎng)站制作公司

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

一：引入微信js

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

二：通過config接口注入權(quán)限驗證配置

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

三：微信端拍照接口

wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
  }
});

四：將照片上傳到微信服務(wù)器接口

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

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

前端：

//url表示php接口地址
//serverId表示圖片的服務(wù)器端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' => '參數(shù)錯誤！'
    ];
  }
  //臨時素材
  $temporary = Yii::$app->wechat->material_temporary;
  //創(chuàng)建服務(wù)器目錄
  $path = 'wechat/' . date('Ymd',time()) . '/';
  $fullPath = Yii::getAlias('@webroot') . '/' . $path;
  if (!is_dir($fullPath)) {
    FileHelper::createDirectory($fullPath);
  }
  //設(shè)置圖片名稱
  $fileName = Yii::$app->getSecurity()->generateRandomString() . '-' . date('His',time());
  //將服務(wù)器端的臨時素材下載到本地服務(wù)器
  $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">點(diǎn)擊</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
//注入權(quán)限驗證配置
wx.config(
  {$wxConfig}
);
$('.btn').click(function () {
    wx.ready(function(){
      wx.chooseImage({
        count: 1, // 默認(rèn)9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
        success: function (res) {
          var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標(biāo)簽的src屬性顯示圖片
          uploadImage(localIds.toString())
        }
      });
    })
  });
  /**
   * 上傳圖片到微信服務(wù)器
   */
  function uploadImage(localIds) {
    wx.uploadImage({
      localId: localIds, // 需要上傳的圖片的本地ID，由chooseImage接口獲得
      isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
      success: function (res) {
        var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
        downloadImage(serverId.toString());
      },
      fail: function() {
        //上傳圖片到微信服務(wù)器失敗
        alert('上傳圖片到微信服務(wù)器失敗');
        return false;
      }
    });
  }
  /**
   * 將微信服務(wù)端的圖片下載到本地服務(wù)器
   */
  function downloadImage(serverId) {
    //url表示php接口地址
    //serverId表示圖片的服務(wù)器端ID
    $.post(url, {'media_id':serverId}, function(data) {
      if (data.type == 'success') {
        //上傳成功
        alert(data.url);
      } else {
        //上傳失敗
        alert(data.message)
      }
    });
  }
JS;
$this->registerJs($JS);
?>

根據(jù)如上代碼就可以實現(xiàn)微信端打開攝像頭拍照再將相片保存到服務(wù)器功能

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信JSSDK怎么實現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)頁名稱：微信JSSDK怎么實現(xiàn)打開攝像頭拍照再將相片保存到服務(wù)器功能
瀏覽路徑：http://chinadenli.net/article32/gsjgpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、App設(shè)計、虛擬主機(jī)、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)