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()
		    }
		  })
		},
相关推荐
西洼工作室5 小时前
unipp+vue3+python h5+app极验验证码集成全流程解析
前端·uni-app·全栈·极验
未若君雅裁13 小时前
Spring Statemachine 实战入门:从零实现一个订单状态流转 Demo
java·spring·状态模式
RuoyiOffice15 小时前
SpringBoot+Vue3 实现 OA 公文外来文与归档台账:外部收文、BPM办理、三类公文统一归档
spring boot·微服务·uni-app·vue·ruoyi·anti-design-vue·ruoyioffice
前端不太难1 天前
从失败到 87.5%:OpenClaw 的任务进化
状态模式·openclaw
前端不太难2 天前
鸿蒙PC和App:都在走向 System
华为·状态模式·harmonyos
云起SAAS2 天前
私域直播系统UniApp源码 多商户商城+直播带货 微信小程序+H5+安卓iOS
android·微信小程序·uni-app·私域直播系统
必胜刻2 天前
全面解析 Token:从入门到 JWT 实战
golang·状态模式·web·前后端交互
木斯佳3 天前
前端八股文面经大全:腾讯前端实习二、三OC面(2026-04-27)·面经深度解析
前端·状态模式
专科3年的修炼3 天前
uni-app移动应用开发第四章
开发语言·javascript·uni-app
q5507071774 天前
uniapp/uniappx实现原生图片编辑涂鸦、贴图、滤镜、旋转、裁剪等
uni-app