uni-app 将base64图片转换成临时地址

后端获取的小程序码,转换成base64,返回给前端,前端转换成临时地址,再写入到canvas海报中

后台的

php 复制代码
public function getCreateQrCode() {
        $orderid = $this->request->post('orderid');
        $page = $this->request->post('page');
        $params = [
            'appid'      => Config::get('ask.wxappid'),
            'secret'     => Config::get('ask.wxappsecret'),
            'grant_type' => 'client_credential'
        ];
        //获取微信调用凭据
        $get_access_token = Http::sendRequest("https://api.weixin.qq.com/cgi-bin/token", $params, 'GET');
        if(isset($get_access_token['msg'])){
            $access_arr = json_decode($get_access_token['msg'],true);
            $access_token = $access_arr['access_token'];
        }else{
            $this->error('微信授权失败!');
        }
        $minicode = [
            'scene'     => $orderid,
            'page'      => $page,
            'width'     => 600,
            'env_version'   => 'trial'
        ];
        $json = json_encode($minicode); //数组加密
        $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=".$access_token;
        $getwxacodeunlimit = Http::sendRequest($url, $json, 'POST');
        // 'data:image/png;base64,' . 不添加前缀,前端需要转换为二进制
        $img_base64 = base64_encode($getwxacodeunlimit['msg']);//转化base64

        $this->success('获取成功',$img_base64);
//        $response = $this->app->app_code->getUnlimit('id'.$orderid, [
//            'page'  => $page,
//            'width' => 600,
//        ]);
//        $img = $response->getBody()->getContents();//获取图片二进制流
//        $img_base64 = 'data:image/png;base64,' .base64_encode($img);//转化base64
//        $this->success('获取成功',$img_base64);

    }

前台

javascript 复制代码
	// 调用
	const base64Image = 'data:image/png;base64,/9j/4AAQSkZJRgA...'; // 替换为实际的base64图片数据

	this.base64ToTempFilePath(base64Image , function(tempFilePath) {
		 // console.log('转换成功,临时地址为:', tempFilePath)
		  that.orderqrpath = tempFilePath // 会在canvas中调用
		}, function() {
		  console.log('转换失败')
		})
			// 将base64图片转换为临时地址
	base64ToTempFilePath(base64Data, success, fail) {
		  const fs = uni.getFileSystemManager()
		  const fileName = 'temp_image_' + Date.now() + '.png' // 自定义文件名,可根据需要修改
		  const filePath = uni.env.USER_DATA_PATH + '/' + fileName
		  const buffer = uni.base64ToArrayBuffer(base64Data)
		  fs.writeFile({
		    filePath,
		    data: buffer,
		    encoding: 'binary',
		    success() {
		      success && success(filePath)
		    },
		    fail() {
		      fail && fail()
		    }
		  })
		},
相关推荐
00后程序员张30 分钟前
iOS软件性能监控实战指南 开发到上线的完整流程解析
android·ios·小程序·https·uni-app·iphone·webview
icebreaker4 小时前
weapp-tailwindcss 已支持 uni-app x 多端构建
前端·javascript·uni-app
mit6.82417 小时前
[Agent开发平台] API网关 | 业务领域 | DTO格式 | 分页令牌
人工智能·golang·状态模式
飏旎2 天前
对于前端闭包的详细理解
前端·状态模式
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
曾经的三心草2 天前
微服务的编程测评系统9-竞赛新增-竞赛编辑
微服务·架构·状态模式
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app
随笔记3 天前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的3 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发