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()
		    }
		  })
		},
相关推荐
m***l1159 小时前
SpringMVC的工作流程
状态模式
i***118615 小时前
SpringBoot中使用TraceId进行日志追踪
spring boot·后端·状态模式
conkl16 小时前
梅森旋转算法深度解析:构建更健壮的前端请求体系
前端·算法·状态模式
星光一影19 小时前
原生社交app/工会/家族/语音房/直播社交/付费解锁聊天/广场好友圈子/一对一聊天交友
mysql·uni-app·php·html5·交友
anyup19 小时前
🔥牛逼!3分钟生成 5 套主题,还能一键切换暗黑模式!
前端·前端框架·uni-app
T0uken20 小时前
Go + Node.js 全栈单文件部署方案
golang·node.js·状态模式
u***B79221 小时前
Spring Boot实时推送技术详解:三个经典案例
spring boot·后端·状态模式
2501_9159184121 小时前
iOS 手机抓包软件怎么选?HTTPS 调试、TCP 数据流分析与多工具组合的完整实践
android·ios·智能手机·小程序·https·uni-app·iphone
i***l9201 天前
使用 Spring Boot 实现图片上传
spring boot·后端·状态模式
游戏开发爱好者81 天前
iOS 应用上架的工程实践复盘,从构建交付到审核通过的全流程拆解
android·ios·小程序·https·uni-app·iphone·webview