微信小程序二维码图片上传阿里OSS

2 篇文章 0 订阅

一、获取微信AccessToken

$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$result['appid']."&secret=".$result['secret'];
$access_token = WxBase::curlGet($url);
public static function curlGet($url = '', $options = array())
{
	$ch = curl_init($url);
	 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	 curl_setopt($ch, CURLOPT_TIMEOUT, 30);
	 if (!empty($options)) {
	     curl_setopt_array($ch, $options);
	 }
	 //https请求 不验证证书和host
	 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
	 curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
	 $data = curl_exec($ch);
	 curl_close($ch);
	
	 return json_decode($data,true);
}

二、获取微信小程序二维码

$page = [
 	'scene' => 'acode=1',
	'page'  =>  'pages/detail/detail',
];
$fileName = 'business/qrcode/'.md5(microtime()).'.png';
$url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=".$access_token;
$res = WxBase::curlPost($url, json_encode($page));
// 上传文件流
$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
$result = $ossClient->putObject($bucket, $fileName, $res);

三、前端打包下载

//数据格式
var content = {
    title: '二维码',
    data: [
    	{
            name: '图片名称',
            url: '图片完整路径'
        }
    ]
};
<templa
te>
    <div></div>
</template>

<script>
    /**
     * oss批量打包下载图片 
     */
    import JSZip from 'jszip';
    import FileSaver from "file-saver";

    export default {
        name: "oss-pack-download",
        data() {
			return {

			}
		},
		methods: {
           downloadOss(e){
                var blogTitle = e.title;
                var zip = new JSZip();
                var imgs = zip.folder(blogTitle);
                var baseList = [];
                var that = this;
                for (var i = 0; i < e.data.length; i++) {
                    let image = new Image();
                    // 解决跨域 Canvas 污染问题
                    image.setAttribute('crossOrigin', 'anonymous');
                    
                    image.onload = function () {
                        let canvas = document.createElement('canvas');
                        canvas.width = image.width;
                        canvas.height = image.height;
                        
                        let context = canvas.getContext('2d');
                        context.drawImage(image, 0, 0, image.width, image.height);
                        
                        let url = canvas.toDataURL(); // 得到图片的base64编码数据
                        canvas.toDataURL('image/png');
                        
                        baseList.push(url.substring(22));    // 去掉base64编码前的 data:image/png;base64,
                        if (baseList.length === e.data.length && baseList.length > 0) {
                            for (let k = 0; k < baseList.length; k++) {
                                imgs.file(e.data[k].name + '.png', baseList[k], {base64: true})
                            }
                            zip.generateAsync({type: 'blob'}).then(function (content) {
                                // see FileSaver.js
                                FileSaver.saveAs(content, blogTitle + '.zip');
                            });
                        }
        
                    };
                    image.src = e.data[i].url;
                }
            },
        }
	
    }
</script>

参考地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值