2. 程式人生 > >微信小程式/網站 上傳圖片到騰訊雲COS

微信小程式/網站 上傳圖片到騰訊雲COS

阿新 • • 發佈：2019-02-01

COS簡介: 騰訊雲提供的一種物件儲存服務，供開發者儲存海量檔案的分散式儲存服務。可以將自己開發的應用的儲存部分全部接入COS的儲存桶中，有效減少應用伺服器的頻寬消耗等。個人也可以通過騰訊雲賬號免費使用COS6個月，https://cloud.tencent.com/product/cos

整體流程簡介: 

1. 前端引入cos的SDK檔案

2. 監聽上傳控制元件，並在圖片載入至網頁臨時流中發起簽名請求

3.後端根據上傳的請求方式和路徑引數返回簽名Authorization和token XCosSecurityToken

4.前端再根據返回的引數和SDK以3的請求方式上傳圖片。

PHP簽名返回流程:

1.在騰訊雲的建好儲存桶並配置CORS規則https://cloud.tencent.com/document/product/436/11459

2.在平臺上拿到Bucket(儲存桶)，Region(地域)，SecretId，SecretKey等引數。

3.使用(SecretId,Timestamp…)引數進行簽名通過騰訊雲的介面獲取臨時金鑰，返回給前端的token也在臨時金鑰中

4.根據前端傳的(上傳請求方式，路徑)和臨時金鑰進行簽名(前端上傳所使用的)並返回。

一、PHP獲取簽名部分(tp5)

<?php
// +----------------------------------------------------------------------
// | When work is a pleasure, life is a joy!
// +----------------------------------------------------------------------
 

// | User: 傅超|  Email:[email protected] | Time:2018/04/21 17:55
// +----------------------------------------------------------------------
// | TITLE: 小程式介面
// +----------------------------------------------------------------------

namespace app\v1\controller;

use think\Request;
use think\Db;
use app\v1\location
 
\Location;
use think\Cache;
use \app\v1\auth\AccessToken;
use \app\v1\extend\Loginlog;

// 返回資料給前端
header('Content-Type: application/json');
header('Allow-Control-Allow-Origin: *');       // 這裡修改允許跨域訪問的網站
// header('Allow-Control-Allow-Origin: http://127.0.0.1');       // 這裡修改允許跨域訪問的網站
//header('Allow-Control-Allow-Origin: http://mer.runmoneyin.com'); // 這裡修改允許跨域訪問的網站
header('Allow-Control-Allow-Headers: origin,accept,content-type');


/**
 * Class  Cosauth
 * @title 獲取騰訊雲cos簽名介面
 * @url   http://119.29.10.64/v1/Cosauth
 * @desc  小程式介面包含：獲取上傳圖片簽名
 * @version 1.0
 */
classCosauthextendsBase{
    // 附加方法
    protected $extraActionList = ['getCosAuth', 'getCosAuth'];

    // 跳過驗證方法
    protected $skipAuthActionList = ['getCosAuth', 'getCosAuthEsay'];

    // appid
    //protected $appid = 'wx4c0e1852239664b4';

    // cos配置引數
    protected $config = array(
        'Url'         => 'https://sts.api.qcloud.com/v2/index.php',
        'Domain'      => 'sts.api.qcloud.com',   
        'Proxy'       => '',
        'SecretId'    => 'AK********************BLK9nF5dZL', // 固定金鑰
        'SecretKey'   => 'jHj5G*********************IUcqJu',     // 固定金鑰
        'Bucket'      => 'activity-1255484416',               // 儲存桶
        'Region'      => 'ap-guangzhou',
        'AllowPrefix' => '*', // 這裡改成允許的路徑字首，這裡可以根據自己網站的使用者登入態判斷允許上傳的目錄，例子：* 或者 a/* 或者 a.jpg
    );

    /**
     * @title 獲取簽名入口
     * http://119.29.10.64/v1/Cosauth/getCosAuth
     */
    public functiongetCosAuth(){
        // $data['say'] = 'hello';
        // echo json_encode($data);
        // die;

        // 快取臨時金鑰
        if (!isset($_SESSION['tempKeysCache'])) {
            $_SESSION['tempKeysCache'] = array(
                'policyStr' => '',
                'expiredTime' => 0
            );
        }

        // 獲取前端過來的引數
        // $method = isset($_GET['method']) ? $_GET['method'] : 'get';
        // $pathname = isset($_GET['pathname']) ? $_GET['pathname'] : '/';
        
        $method   = input('method') ? input('method') : 'post';
        $pathname = input('pathname') ? input('pathname') : '/';
        $callback = input('callback') ? input('callback') : '';    // 前端跨域的jsonp引數(可忽略)

        // 獲取臨時金鑰，計算簽名
        $tempKeys = $this->getTempKeys();

        if ($tempKeys && $tempKeys['credentials']) {

            // $datas = $this->getAuthorization($tempKeys, $method, $pathname);
            // echo json_encode($datas);
            // die;
            $data = array(
                'Authorization' => $this->getAuthorization($tempKeys, $method, $pathname),
                'XCosSecurityToken' => $tempKeys['credentials']['sessionToken'],
            );

        } else {
            $data = array('error'=> $tempKeys);
        }

        //echo $callback . '(' . json_encode($data) . ')';     // 通過回撥返回給其他域(可忽略)
        echo json_encode($data);     // 正常寫法的返回
        die;
    }


    // json 轉 query string
    public functionjson2str($obj, $notEncode = false){
        ksort($obj);
        $arr = array();
        foreach ($obj as $key => $val) {
            !$notEncode && ($val = urlencode($val));
            array_push($arr, $key . '=' . $val);
        }
        return join('&', $arr);
    }

    // 計算臨時金鑰用的簽名
    public functiongetSignature($opt, $key, $method){
        //global $config;
        $formatString = $method . $this->config['Domain'] . '/v2/index.php?' . $this->json2str($opt, 1);
        $sign = hash_hmac('sha1', $formatString, $key);
        $sign = base64_encode(hex2bin($sign));
        return $sign;
    }

    // 獲取臨時金鑰
    public functiongetTempKeys(){

        //global $config;

        // 判斷是否修改了 AllowPrefix
        if ($this->config['AllowPrefix'] === '_ALLOW_DIR_/*') {
            return array('error'=> '請修改 AllowPrefix 配置項，指定允許上傳的路徑字首');
        }

        $ShortBucketName = substr($this->config['Bucket'],0, strripos($this->config['Bucket'], '-'));
        $AppId = substr($this->config['Bucket'], 1 + strripos($this->config['Bucket'], '-'));
        $policy = array(
            'version'=> '2.0',
            'statement'=> array(
                array(
                    'action'=> array(
                        // 簡單檔案操作
                        'name/cos:PutObject',
                        'name/cos:PostObject',
                        'name/cos:AppendObject',
                        'name/cos:GetObject',
                        'name/cos:HeadObject',
                        'name/cos:OptionsObject',
                        'name/cos:PutObjectCopy',
                        'name/cos:PostObjectRestore',
                        // 分片上傳操作
                        'name/cos:InitiateMultipartUpload',
                        'name/cos:ListMultipartUploads',
                        'name/cos:ListParts',
                        'name/cos:UploadPart',
                        'name/cos:CompleteMultipartUpload',
                        'name/cos:AbortMultipartUpload',
                    ),
                    'effect'=> 'allow',
                    'principal'=> array('qcs'=> array('*')),
                    'resource'=> array(
                        'qcs::cos:' . $this->config['Region'] . ':uid/' . $AppId . ':prefix//' . $AppId . '/' . $ShortBucketName . '/',
                        'qcs::cos:' . $this->config['Region'] . ':uid/' . $AppId . ':prefix//' . $AppId . '/' . $ShortBucketName . '/' . $this->config['AllowPrefix']
                    )
                )
            )
        );

        $policyStr = str_replace('\\/', '/', json_encode($policy));
        $Action = 'GetFederationToken';
        $Nonce = rand(10000, 20000);
        $Timestamp = time() - 1;
        $Method = 'GET';

        $params = array(
            'Action'=> $Action,
            'Nonce'=> $Nonce,
            'Region'=> '',
            'SecretId'=> $this->config['SecretId'],
            'Timestamp'=> $Timestamp,
            'durationSeconds'=> 7200,
            'name'=> '',
            'policy'=> $policyStr
        );
        $params['Signature'] = urlencode($this->getSignature($params, $this->config['SecretKey'], $Method));

        $url = $this->config['Url'] . '?' . $this->json2str($params, 1);
        $ch = curl_init($url);
        $this->config['Proxy'] && curl_setopt($ch, CURLOPT_PROXY, $this->config['Proxy']);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $result = curl_exec($ch);
        if(curl_errno($ch)) $result = curl_error($ch);
        curl_close($ch);

        $result = json_decode($result, 1);
        $_SESSION['tempKeysCache'] = $result['data'];
        $_SESSION['tempKeysCache']['policyStr'] = $policyStr;

        return $result['data'];
    }

    // 計算 COS API 請求用的簽名
    public functiongetAuthorization($keys, $method, $pathname){

        // 獲取個人 API 金鑰 https://console.qcloud.com/capi
        $SecretId = $keys['credentials']['tmpSecretId'];
        $SecretKey = $keys['credentials']['tmpSecretKey'];

        // 整理引數
        $query = array();
        $headers = array();
        $method = strtolower($method ? $method : 'get');
        $pathname = $pathname ? $pathname : '/';
        substr($pathname, 0, 1) != '/' && ($pathname = '/' . $pathname);

        // 工具方法
        functiongetObjectKeys($obj){
            $list = array_keys($obj);
            sort($list);
            return $list;
        }

        functionobj2str($obj){
            $list = array();
            $keyList = getObjectKeys($obj);
            $len = count($keyList);
            for ($i = 0; $i < $len; $i++) {
                $key = $keyList[$i];
                $val = $obj[$key] ? $obj[$key] : '';
                $key = strtolower($key);
                $list[] = rawurlencode($key) . '=' . rawurlencode($val);
            }
            return implode('&', $list);
        }

        // 簽名有效起止時間
        $now = time() - 1;
        $expired = $now + 3600; // 簽名過期時刻，600 秒後

        // 要用到的 Authorization 引數列表
        $qSignAlgorithm = 'sha1';
        $qAk = $SecretId;
        $qSignTime = $now . ';' . $expired;
        $qKeyTime = $now . ';' . $expired;
        $qHeaderList = strtolower(implode(';', getObjectKeys($headers)));
        $qUrlParamList = strtolower(implode(';', getObjectKeys($query)));


        // 簽名演算法說明文件：https://www.qcloud.com/document/product/436/7778
        // 步驟一：計算 SignKey
        $signKey = hash_hmac("sha1", $qKeyTime, $SecretKey);

        // 步驟二：構成 FormatString
        $formatString = implode("\n", array(strtolower($method), $pathname, obj2str($query), obj2str($headers), ''));

        // 自定義頭部(暫時關閉)
        // header('x-test-method', $method);
        // header('x-test-pathname', $pathname);

        // 步驟三：計算 StringToSign
        $stringToSign = implode("\n", array('sha1', $qSignTime, sha1($formatString), ''));

        // 步驟四：計算 Signature
        $qSignature = hash_hmac('sha1', $stringToSign, $signKey);

        // 步驟五：構造 Authorization
        $authorization = implode('&', array(
            'q-sign-algorithm=' . $qSignAlgorithm,
            'q-ak=' . $qAk,
            'q-sign-time=' . $qSignTime,
            'q-key-time=' . $qKeyTime,
            'q-header-list=' . $qHeaderList,
            'q-url-param-list=' . $qUrlParamList,
            'q-signature=' . $qSignature
        ));

        return $authorization;
    }

 /*********************************************************************************************************************************************/

//     // cos配置引數
//     protected $config = array(
//         'Url'         => 'https://sts.api.qcloud.com/v2/index.php',
//         'Domain'      => 'sts.api.qcloud.com',   
//         'Proxy'       => '',
//         'SecretId'    => 'AKIDwqbCewU2ZxABC3QDWp1EWrBLK9nF5dZL', // 固定金鑰
//         'SecretKey'   => 'jHj5GIAvV8eFk3B8tSwKXYO4f0IUcqJu',     // 固定金鑰
//         'Bucket'      => 'xcx-1255484416',
//         'Region'      => 'ap-guangzhou',
//         'AllowPrefix' => '*', // 這裡改成允許的路徑字首，這裡可以根據自己網站的使用者登入態判斷允許上傳的目錄，例子：* 或者 a/* 或者 a.jpg
//     );
//     // $config = array(
//     //     'Url' => 'https://sts.api.qcloud.com/v2/index.php',
//     //     'Domain' => 'sts.api.qcloud.com',
//     //     'Proxy' => '',
//     //     'SecretId' => 'AKIDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 固定金鑰
//     //     'SecretKey' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', // 固定金鑰
//     //     'Bucket' => 'test-1250000000',
//     //     'Region' => 'ap-guangzhou',
//     //     'AllowPrefix' => '_ALLOW_DIR_/*', // 必填，這裡改成允許的路徑字首，這裡可以根據自己網站的使用者登入態判斷允許上傳的目錄，例子：* 或者 a/* 或者 a.jpg
//     // );
//     // json 轉 query string
//     function json2str($obj, $notEncode = false) 
//     {
//         ksort($obj);
//         $arr = array();
//         foreach ($obj as $key => $val) {
//             !$notEncode && ($val = urlencode($val));
//             array_push($arr, $key . '=' . $val);
//         }
//         return join('&', $arr);
//     }

//     // 計算臨時金鑰用的簽名
//     function getSignature($opt, $key, $method) 
//     {

//         $formatString = $method . $this->config['Domain'] . '/v2/index.php?' . self::json2str($opt, 1);
//         $sign = hash_hmac('sha1', $formatString, $key);
//         $sign = base64_encode(hex2bin($sign));
//         return $sign;
//     }

//     // 獲取臨時金鑰
//     function getTempKeys() 
//     {
//         // 判斷是否修改了 AllowPrefix
//         if ($this->config['AllowPrefix'] === '_ALLOW_DIR_/*') {
//             return array('error'=> '請修改 AllowPrefix 配置項，指定允許上傳的路徑字首');
//         }
// // dump($this->config);
//         $ShortBucketName = substr($this->config['Bucket'],0, strripos($this->config['Bucket'], '-'));
//         $AppId = substr($this->config['Bucket'], 1 + strripos($this->config['Bucket'], '-'));
//         $policy = array(
//             'version'=> '2.0',
//             'statement'=> array(
//                 array(
//                     'action'=> array(
//                         // // 這裡可以從臨時金鑰的許可權上控制前端允許的操作
//                           'name/cos:*', // 這樣寫可以包含下面所有許可權
//                         // // 列出所有允許的操作
//                         // // ACL 讀寫
//                         // 'name/cos:GetBucketACL',
//                         // 'name/cos:PutBucketACL',
//                         // 'name/cos:GetObjectACL',
//                         // 'name/cos:PutObjectACL',
//                         // // 簡單 Bucket 操作
//                         // 'name/cos:PutBucket',
//                         // 'name/cos:HeadBucket',
//                         // 'name/cos:GetBucket',
//                         // 'name/cos:DeleteBucket',
//                         // 'name/cos:GetBucketLocation',
//                         // // Versioning
//                         // 'name/cos:PutBucketVersioning',
//                         // 'name/cos:GetBucketVersioning',
//                         // // CORS
//                         // 'name/cos:PutBucketCORS',
//                         // 'name/cos:GetBucketCORS',
//                         // 'name/cos:DeleteBucketCORS',
//                         // // Lifecycle
//                         // 'name/cos:PutBucketLifecycle',
//                         // 'name/cos:GetBucketLifecycle',
//                         // 'name/cos:DeleteBucketLifecycle',
//                         // // Replication
//                         // 'name/cos:PutBucketReplication',
//                         // 'name/cos:GetBucketReplication',
//                         // 'name/cos:DeleteBucketReplication',
//                         // // 刪除檔案
//                         // 'name/cos:DeleteMultipleObject',
//                         // 'name/cos:DeleteObject',
//                         // 簡單檔案操作
//                         'name/cos:PutObject',
//                         'name/cos:PostObject',
//                         'name/cos:AppendObject',
//                         'name/cos:GetObject',
//                         'name/cos:HeadObject',
//                         'name/cos:OptionsObject',
//                         'name/cos:PutObjectCopy',
//                         'name/cos:PostObjectRestore',
//                         // 分片上傳操作
//                         'name/cos:InitiateMultipartUpload',
//                         'name/cos:ListMultipartUploads',
//                         'name/cos:ListParts',
//                         'name/cos:UploadPart',
//                         'name/cos:CompleteMultipartUpload',
//                         'name/cos:AbortMultipartUpload',
//                     ),
//                     'effect'=> 'allow',
//                     'principal'=> array('qcs'=> array('*')),
//                     'resource'=> array(
//                         'qcs::cos:' . $this->config['Region'] . ':uid/' . $AppId . ':prefix//' . $AppId . '/' . $ShortBucketName . '/',
//                         'qcs::cos:' . $this->config['Region'] . ':uid/' . $AppId . ':prefix//' . $AppId . '/' . $ShortBucketName . '/' . $this->config['AllowPrefix']
//                     )
//                 )
//             )
//         );

//         $policyStr = str_replace('\\/', '/', json_encode($policy));
//         $Action = 'GetFederationToken';
//         $Nonce = rand(10000, 20000);
//         $Timestamp = time() - 1;
//         $Method = 'GET';
//         $params = array(
//             'Action'=> $Action,
//             'Nonce'=> $Nonce,
//             'Region'=> '',
//             'SecretId'=> $this->config['SecretId'],
//             'Timestamp'=> $Timestamp,
//             'durationSeconds'=> 7200,
//             'name'=> '',
//             'policy'=> $policyStr
//         );

//         $params['Signature'] = urlencode(self::getSignature($params, $this->config['SecretKey'], $Method));
//         $url = $this->config['Url'] . '?' . self::json2str($params, 1);
//         $ch = curl_init($url);
//         $this->config['Proxy'] && curl_setopt($ch, CURLOPT_PROXY, $this->config['Proxy']);
//         curl_setopt($ch, CURLOPT_HEADER, 0);
//         curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
//         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
//         $result = curl_exec($ch);
//         if(curl_errno($ch)) $result = curl_error($ch);
//         curl_close($ch);
//         $result = json_decode($result, 1);
//         return $result['data'];
//     }

//     public function getCosAuth() 
//     {
//         // 獲取臨時金鑰，計算簽名
//         $tempKeys = self::getTempKeys();
//         // 返回資料給前端
//         header('Content-Type: application/json');
//         header('Allow-Control-Allow-Origin: *'); // 這裡修改允許跨域訪問的網站
//         header('Allow-Control-Allow-Headers: origin,accept,content-type');

//         echo json_encode($tempKeys);
//     }
}

二、javascript上傳圖片部分

首先去騰旭雲下載cos-js-sdk-v5.min.js並引入頁面，這裡只展示實現部分

// 圖片上傳監聽事件
functionuploadConver(_this,event) {

	for(var i = 0;i<event.target.files.length;i++) {
        var files = event.target.files[i];

        if (!files) {
			tipPopup('未選擇上傳檔案',1100,4);
			return;
		}

		files && uploadFile(files, function (err, data) {

			if(data) {
				$("#preImg").html("").append('<img src="'+data.url+'" width="200px"/>');
				//$("#conver").val(data.url);
				console.log(data);
			}else {
				console.log(err);
			}

			//console.log(err || data);
			//document.getElementById('msg').innerText = err ? err : ('上傳成功，ETag=' + data.ETag);
		});
        //uploadFileToOss(file);
        //console.log(file);
    }
}

// 非同步請求上傳簽名
var getAuthorization = function (options, callback) {
        
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
     xhr.onload = function (e) {
         var AuthData;
         try {
             AuthData = JSON.parse(xhr.responseText)
         } catch (e) {}
         if (AuthData && AuthData.Aut

相關推薦

微信小程式/網站 上傳圖片到騰訊雲COS

COS簡介: 騰訊雲提供的一種物件儲存服務，供開發者儲存海量檔案的分散式儲存服務。可以將自己開發的應用的儲存部分全部接入COS的儲存桶中，有效減少應用伺服器的頻寬消耗等。個人也可以通過騰訊雲賬號免費使用COS6個月，https://cloud.tencent.com/prod

微信小程序/網站 上傳圖片到騰訊雲COS

arr n) ram index.php 函數返回 tps etag 循環 5.0 COS簡介: 騰訊雲提供的一種對象存儲服務，供開發者存儲海量文件的分布式存儲服務。可以將自己開發的應用的存儲部分全部接入COS的存儲桶中，有效減少應用服務器的帶寬，請求等。個人也可以通過騰訊

微信小程式如何上傳圖片至伺服器（node.js例項分享）

一、前臺處理 (1)首先在wxml中為按鈕繫結上傳圖片事件 <button bindtap="upImgClick">上傳圖片</button> <image src='{{imgUrl}}'></image>

微信小程式之----上傳圖片

  微信小程式上傳圖片用到的api wx.chooseImage(OBJECT)wx.previewImage(OBJECT)wx.uploadFile(OBJECT) 這幾個基本的api的使用方法可

微信小程式檔案上傳，圖片上傳

1：xml <view style="margin-top: 20px" class="weui-flex">   <view style="width: 35%;font-size: 0.7em">證件照片</view>   <

關於實現微信小程式一次性上傳多張圖片所遇到問題的解決方案

/** * 圖片上傳 * * @return * @throws Exception */ //@ExcLoginInterceptor 自定義的攔截器註解 @RequestMapping(value = "/upload",produces

微信小程式程式碼上傳，稽核釋出小程式

1.開啟微信開發者工具 管理員掃碼 -> 填寫好小程式的專案目錄、AppID（必須是客戶已註冊好的AppID）、專案名稱 2.在app.js中修改id（客戶登入後臺管理系統的id），app.json中修改頁面導航欄標題navigationBarTitleText

微信小程式視訊上傳

1、wxml <video id='video{{idx}}' show-center-play-btn="{{true}}" src='{{videoUrl}}' controls="true" objectFit="cover"> </video> <b

微信小程式 如何上傳音視訊到百度雲Bos cloud BCE

在做了一系列調查之後，目前為止暫未發現有相關的文章，在此簡單記錄一下解決此問題的步驟，造福來人。本人的解決方案參考了百度雲BOS官方文件，地址如下：使用wx.uploadFile介面上傳。其中，需要特別關注的是：百度雲通過Post方式上傳Object，要求必須存在Policy

微信小程式如何上傳，提交稽核，釋出操作

微信小程式如何上傳、提交稽核、釋出操作 工具/原料 微信開發工具 小程式 方法/步驟 首先，賬號登陸微信公眾號後臺進行設定小程式基本資訊設定操作 登陸後，設定小程式基本資訊，包括名稱、頭像、介紹及服務範圍，開發設定中的伺服器域名設定

微信小程式怎麼上傳程式碼

很多企業商家做了微信小程式，都想自己獨立的去操作後臺，但大多企業商家都沒有相關的技術人員，就上傳程式碼都成了問題，以下微信小程式觀察網請新增連結描述就和大家分享一下微信小程式怎麼上傳程式碼，希望對您有幫助！ 第一步：登入微信公眾號後臺進行小程式基本資訊設定操作第二步：設定小程式基本資訊，包括名稱、頭像、介紹

如何用Baas快速在騰訊雲上開發小程式-系列3 ：實現騰訊雲COS API呼叫

一、實驗簡介 本實驗通過呼叫騰訊雲物件儲存（COS）介面，實現將圖片上傳到指定的 Bucket 功能；同時封裝圖片上傳介面，用於上傳商品圖片。 二、實驗目標 掌握 RESTFul API 介面呼叫和除錯方法掌握 RESTFul API 封裝方法 三、實驗步驟

微信小程式-從相簿獲取圖片,視訊 使用相機拍照,錄影上傳+伺服器(nodejs版)接收

在本文 微信小程式-從相簿獲取圖片 使用相機拍照 本地圖片上傳之前需要看看 程式碼封裝是在上文新增的。 本文知識點： 1、微信小程式選擇圖片wx.chooseImage()介面的使用 2、

微信小程式 返回上一頁並傳參

itemClick: function(e) { let pages = getCurrentPages(); let prevPage = pages

11.微信小程式之canvas生成圖片並儲存到手機

在小程式中，會有這樣一種需求，儲存某一個頁面並將其分享到朋友圈。一般的做法是：將這個頁面用canvas繪製出來，通過wx.canvasToTempFilePath，把當前畫布指定區域的內容匯出生成指定大小的圖片。然後再通過wx.saveImageToPhotosAlbum，儲存圖片到系統相簿。由

微信小程式跳轉傳引數

跳轉傳參頁面 wx.navigateTo({ url: '../beiyun/beiyun?引數一=' + 引數一的值+‘&引數二’+引數二的值, }) 接收引數的頁面 頁面載入時接收 onLoad: function(options)

微信小程式——父子元件傳參以及方法的呼叫

父元件向子元件傳參 A元件為父元件，B元件為子元件，以下是A元件向B元件傳參 在A元件中引入B元件（父元件引入子元件） 在A元件的json中寫入（父元件）： { "component": true, "usingComponents": { "com

微信小程式 儲存 預覽 圖片

<view class='pay-con' bindtap="previewImage">儲存 預覽</view>   //預覽 wx.previewImage({ urls: ["url","url"]  //需注意  引數為陣

微信小程式：Animation實現圖片旋轉動畫

最近小程式中有一個圖片旋轉的需求，最初是想著通過切換多張圖片達到旋轉的效果，後來發現微信小程式帶有動畫api，然後就改由image+Animation來實現。 ###首先在wxml中定義image <image class="bth_image2" mode="aspec

微信小程式：點選圖片進行預覽

微信小程式：點選圖片進行預覽   在開發需求中，經常有類似與九宮格的圖片展示，當點選圖片時進行圖片的預覽，如果多圖的情況還可以左右滑動。 小程式中具體實現效果如下： WXML <view class='imgList'>     &nbs