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()
		    }
		  })
		},
相关推荐
leoZ23120 小时前
Vue3 还原一个企业级后台-08-API注册管理
目标检测·机器学习·分类·状态模式·迁移学习·集成学习·figma
PedroQue991 天前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
Haibakeji1 天前
APP小程序定制开发项目频繁延期?前期规避方法与落地避坑指南
小程序·uni-app·软件需求
anyup1 天前
迁移uni-app x,我是如何让 AI 把我一步步搞崩溃的...
前端·uni-app·trae
2501_916007471 天前
申请 iOS 推送证书并配置 APNs 群发推送教程
android·ios·小程序·https·uni-app·iphone·webview
博客zhu虎康1 天前
uni-app云打包显示编译成功,但是一直没有进入打包队列,后面也一直没反应
uni-app
Java&Develop2 天前
QuantDinger 宝塔 Linux 部署完整指南
linux·运维·状态模式
星恒随风2 天前
C++ 红黑树封装(二):迭代器、const_iterator 与 operator[] 完整实现 mymap 和 myset
开发语言·c++·状态模式
JavaDog程序狗2 天前
【指南】uni-app微信小程序多环境CI-CD完全指南
ci/cd·uni-app·jenkins