当前位置: 首页 > news >正文

taro 支付宝/微信小程序/h5 上传 - base64的那些事儿

支付宝小程序临时path转base64 - 基础库2.0以下

 function getImageInfo(path) {return new Promise(resolve => {my.getImageInfo({src: path,success: res => {resolve(res)}})})
}
export async function getBase64InAlipay({ id, path }) {const { width, height } = await getImageInfo(path)let newWidth = widthlet newHeight = heightlet scale = 1if (width > height) {newWidth = width > 750 ? 750 : widthscale = newWidth / widthnewHeight = parseInt(height * scale)} else {newHeight = height > 750 ? 750 : heightscale = newHeight / heightnewWidth = parseInt(width * scale)}if (!ctx || (ctx && (newWidth !== canvasWidth || newHeight !== canvasHeight))) {ctx = Taro.createCanvasContext(id)canvasWidth = newWidthcanvasHeight = newHeightevents.trigger(PAGE_EVENTS.SET_CANVAS_SIZE, { width: newWidth, height: newHeight })}return new Promise(resolve => {ctx.drawImage(path, 0, 0, newWidth, newHeight)ctx.draw(false, () => {ctx.toDataURL().then(async dataURL => {resolve(dataURL)})})})
}

支付宝小程序临时path转base64 - 基础库2.0及以上

async function useGetBase64ByFileInAlipay({ path }) {return new Promise(resolve => {const fs = my.getFileSystemManager()fs.readFile({filePath: path,success: ({ data }) => {const base64 = my.arrayBufferToBase64(data)resolve(base64)}})})
}

微信小程序临时path转base64

Taro.getFileSystemManager().readFileSync(path, 'base64')

h5临时file转base64

export function getBase64ByFile(file) {return new Promise((resolve, reject) => {const reader = new FileReader()let fileResult = ''reader.readAsDataURL(file)reader.onload = () => {fileResult = reader.result}reader.onerror = error => {reject(error)}reader.onloadend = () => {resolve(fileResult)}})
}

h5 base64转file

function getFileByBase64(data, filename) {let arr = data.split(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, {type: mime})
}

获取base64大小

function getBase64Size(base64Str) {const idx = base64Str.indexOf('base64,')if (idx < 0) return -1const str = base64Str.substr(idx + 6)return (str.length * 0.75).toFixed(2)
}

h5 压缩base64

function compressBase64(base64) {return new Promise(resolve => {let base64Url = base64if (!base64Url) {resolve('')return}let base64Size = getBase64Size(base64Url)const isExceed = base64Size / 1024 > 1024 * UPLOAD_FILE_SIZE_MAXif (!isExceed) {resolve(base64Url)}let canvas = document.createElement('canvas')let newImage = new Image()let quality = 0.95newImage.src = base64UrlnewImage.onload = function () {canvas.width = newImage.widthcanvas.height = newImage.heightlet ctx = canvas.getContext('2d')ctx.clearRect(0, 0, canvas.width, canvas.height)ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height)base64Url = canvas.toDataURL('image/jpeg', quality)while (base64Size / 1024 > 1024 * UPLOAD_FILE_SIZE_MAX && quality * 100 > 5) {quality -= 0.05base64Url = canvas.toDataURL("image/jpeg", quality)base64Size = getBase64Size(base64Url)}if (base64Size / 1024 > 1024 * UPLOAD_FILE_SIZE_MAX) {useShowToast(`请上传小于${UPLOAD_FILE_SIZE_MAX}M的图片`)resolve('')return}resolve(base64Url)}})
}
http://www.lryc.cn/news/148264.html

相关文章:

  • java之SpringBoot基础、前后端项目、MyBatisPlus、MySQL、vue、elementUi
  • Vue-Router 一篇搞定 Vue3
  • 深度解读智能媒体服务的重组和进化
  • 亲测有效!Win7中如何安装高版本的NodeJS
  • Python基础__with open()用法
  • 深入理解 JavaScript 对象、属性、解构和增强语法
  • 2023年IT服务行业研究报告
  • 腾讯云服务器镜像TencentOS Server有用过的吗?
  • 小区村庄集中生活废水处理设备厂家直销价格
  • Redisson实现分布式锁案例
  • Generated Knowledge Prompting for Commonsense Reasoning
  • mybatisPlus多数据源方案
  • MonoDETR: Depth-guided Transformer for Monocular 3D Object Detection 论文解读
  • Vulnhub内网渗透DC-7靶场通关
  • acunetix2023安装教程
  • pytest pytest.ini 配置日志输出至文件
  • Linux脚本-将当前文件夹下所有包含main函数的.c文件提取出来
  • Spring依赖注入(DI)
  • 论文笔记: 深度学习速度模型构建的层次迁移学习方法 (未完)
  • 苹果为 Vision Pro 头显申请游戏手柄专利
  • 【数据结构】多叉树转换为二叉树-c++代码实现-POJ 3437 Tree Grafting
  • ASP.NET Core 中基于 Controller 的 Web API
  • iOS系统修复软件 Fix My iPhone for Mac
  • Git企业开发控制理论和实操-从入门到深入(七)|企业级开发模型
  • 15. 卡牌游戏
  • vue使用打印组件print-js
  • 20230830比赛总结
  • DNS指向别名还是IP
  • 【考研数学】概率论与数理统计 —— 第二章 | 一维随机变量及其分布(1,基本概念与随机变量常见类型)
  • CSS判断手机暗黑模式