小程序中base64格式和图片互转

news/2024/7/20 1:50:24 标签: uni-app, 小程序

小程序中base64格式转成图片

base64转图片
//base64转图片
base64src(base64data, cb) {
	const fsm = wx.getFileSystemManager();
	const FILE_BASE_NAME = 'code'; //自定义文件名
	const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
	if (!format) {
	    return (new Error('ERROR_BASE64SRC_PARSE'));
	}
	const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
	const buffer = wx.base64ToArrayBuffer(bodyData);
    fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success() {
      cb(filePath);
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'));
    },
  });
},
Img(){
	this.base64src(that.page_data.qrCode, resCurrent => { //第一个参数是that.page_data.qrCode是要传入的base64格式的文件,resCurrent是返回的图片
							that.page_data.codePng = resCurrent
	})
}
图片转base64
<template>
  <div>
      <div>
    <input type="file" ref="upFile"  @change="File()"/>
    <img :src="Bsieks" alt="" style="wigth:500px;height:500px"></div>
  </div>
</template>
export default {
  methods: {
    File() {
      let file = this.$refs.upFile.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(file); //调用自带方法进行转换
      reader.onload = (e) => {
        console.log(e.target.result);
      };
    },
  },
};

http://www.niftyadmin.cn/n/565902.html

相关文章

Windows Nacos使用教程(下载、启动、登录)

1 下载 下载Nacos免安装压缩包。 https://github.com/alibaba/nacos/releases 2 启动 第一步&#xff0c;解压下载好的压缩包。 第二步&#xff0c;进入nacos/bin目录。 第三步&#xff0c;打开startup.cmd&#xff0c;启动Nacos。 3 登录 第一步&#xff0c;浏览器输入ht…

uni-app通过canvas将两张图片合成一张图片

uni-app通过canvas将两张图片合成一张图片 如果出现在开发工具工具中可以合成并查看&#xff0c;在真机预览时只有打开调试面板才能看到合成的图片&#xff0c;极大可能线上图片的地址中包含的域名&#xff0c;在微信呢后台没有配置&#xff0c;这时要检验一下微信后台配置的d…

EasyExcel 自定义LocalDate类型转换器Converter

1 Maven依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.8</version></dependency> 2 LocalDateConverter LocalDate类型转换器。 package com.convert;import com.aliba…

MinIO 直接预览MinIO文件服务器保存的图片(获取图片绝对路径)

1 Maven 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>io.minio</groupId><artifactId>minio</artifa…

ant-design中表格合并单元格并填充按钮

ant-design中表格合并单元格并填充按钮 效果如下 代码如下 <template><a-card><a-table:columns"columns":data-source"data"change"changePage":rowKey"(record) > { return record.seckill_goods_id;}":customR…

EasyExcel 自定义类型转换器Converter3种加载方式(转换字段加载类型转换器、导出时加载类型转换器、加载全局类型转换器)

1 Maven依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.8</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>…

js中遍历对象的方式

js中遍历对象的方式 for…in… let object {first: 12,second: 13 } for (let item in object) {console.log(item) // first,secondconsole.log(object[item]) //12,13 }Object.key遍历 let object {first: 12,second: 13 } Object.keys(object) // first,second Object…

Visual Studio 无法直接启动带有“类库输出类型“的项目。若要调试此项目,请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目问题解决

问题描述&#xff1a; 无法直接启动带有"类库输出类型"的项目。 若要调试此项目&#xff0c;请在此解决方案中添加一个引用库项目的可执行项目。将这个可执行项目设置为启动项目。 问题分析&#xff1a; 1、解决方案没有设置启动项目&#xff0c;导致启动报…