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()
		    }
		  })
		},
相关推荐
三声三视4 小时前
uni-app 鸿蒙端传参变成 [object Object]?顺着源码追到 ArkTS router 底层才搞明白
人工智能·ai·uni-app·aigc·ai编程·harmonyos
小徐_233311 小时前
Open Wot 1.0.5 发布:让 AI 接入 wot-ui,只需要两条命令
前端·uni-app·ai编程
xxwl58514 小时前
markdown基础语法
状态模式
三川69814 小时前
深入浅出SSD 01:SSD综述
状态模式
cyadyx14 小时前
MapStruct 的转换实践
状态模式·mapstruct·充血模式
AI多Agent协作实战派15 小时前
AI多Agent协作系统实战(二十二):从6列到12列——任务监控报告的进化之路
java·人工智能·uni-app·bug
小杨小杨、努力变强!17 小时前
VS Code运行HBuilder X中的uni-app项目
vscode·uni-app·uni-app run
码兄科技1 天前
实战:基于Spring Boot + UniApp的地理信息小程序开发
spring boot·后端·uni-app
2501_916007472 天前
iOS和macOS应用程序性能分析和优化工具使用综合指南
android·macos·ios·小程序·uni-app·iphone·webview
2501_916007473 天前
深入理解HTTPS对称与非对称加密机制及Charles抓包实践
网络协议·http·ios·小程序·https·uni-app·iphone