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.mzph.cn/news/61557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue-Router 一篇搞定 Vue3

前言 在 Web 前端开发中&#xff0c;路由是非常重要的一环&#xff0c;但是路由到底是什么呢&#xff1f; 从路由的用途上讲 路由是指随着浏览器地址栏的变化&#xff0c;展示给用户不同的页面。 从路由的实现原理上讲 路由是URL到函数的映射。它将 URL 和应用程序的不同部分…

Linux系统Ubuntu配置Docker详细流程

本文介绍在Linux操作系统Ubuntu的18.04及以上版本中&#xff0c;配置开源容器化平台和工具集Docker的详细方法&#xff1b;其中&#xff0c;我们以配置Docker平台的核心组件之一——Docker Engine为例来详细介绍。 首先&#xff0c;大家需要明确&#xff0c;我们常说的Docker&a…

【Go 基础篇】Go语言结构体之间的转换与映射

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;用于定义和组织不同类型的数据字段。当我们处理复杂的数据逻辑时&#xff0c;常常需要在不同的结构体之间进行转换和映射&#xff0c;以便实现数据的转移和处理。本文将深入探讨Go语言中结构体之间的转换和映射技…

C++强制类型转换

为什么C需要强制类型转换&#xff1f; C风格的转换格式很简单&#xff0c;但是有不少缺点的&#xff1a; 隐式类型转化有些情况下可能会出问题&#xff1a;比如数据精度丢失显式类型转换将所有情况混合在一起&#xff0c;代码不够清晰因此C提出了自己的类型转化风格&#xff…

9.Redis-zset

zset zset 有序集合 -> 升序常用命令zaddzcardzcountzrangezrevrange -> reverse 逆序zrangebyscorezpopmaxzpopminbzpopmax / bzpopminzrankzrevrankzscorezremzremrangebyrankzremrangebyscorezincrby集合间操作zinter -> 交集zunion -> 并集zdiff -> 差集zin…

贝锐蒲公英异地组网方案,如何阻断网络安全威胁?

随着混合云和移动办公的普及&#xff0c;企业网络面临着越来越复杂的安全威胁环境。 大型企业有足够的能力和预算&#xff0c;构建覆盖全部个性化需求的定制化网络安全方案。 但对于广大中小企业来说&#xff0c;由于实际业务发展情况&#xff0c;他们难以在部署周期、预算成本…

HDLBits 练习 Always if2

Always if2 一个常见的错误&#xff1a;如何避免产生锁存器。 当设计一的电路的时候&#xff0c;你首先应该从电路的角度去思考。 我想要一个逻辑门我想要一个有着3和输入和3输出的组合逻辑电路。我想要一个后边跟着一个触发器的组合逻辑电路。 你必须不能先写代码&#xf…

配置MySQL

配置MySQL_5.7.16 一级目录2.1.1 安装包准备2.1.2 安装MySQL2.1.3 配置MySQL 一级目录 2.1.1 安装包准备 1&#xff09;将安装包和JDBC驱动上传到/opt/software&#xff0c;共计6个 01_mysql-community-common-5.7.16-1.el7.x86_64.rpm 02_mysql-community-libs-5.7.16-1.el…

【服务器】交换机带外管理和带内管理

一、交换机的带外管理是什么&#xff1f; 在带外管理模式中&#xff0c;网络的管理控制信息与用户网络的承载业务信息在不同的逻辑信道传送。 带外管理最大的优势在于&#xff0c;当网络出现故障中断时数据传输和管理都可以正常进行——不同的物理通道传送管理控制信息和数据…

windows使用vim编辑文本powershell

windows使用vim编辑文本 1、安装 chocolatey 包 以管理员身份打开 PowerShell 进行安装 Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://chocolatey.org/install.ps1))2、管理员身份打开 PowerShell 并使…

python 笔记(2)——文件、异常、面向对象、装饰器、json

目录 1、文件操作 1-1&#xff09;打开文件的两种方式&#xff1a; 1-2&#xff09;文件操作的简单示例&#xff1a; write方法: read方法&#xff1a; readline方法&#xff1a; readlines方法&#xff1a; 2、异常处理 2-1&#xff09;不会中断程序的异常捕获和处理…

Python基础__with open()用法

1、open与with open区别 open&#xff08;&#xff09;完成后必须调用close()方法关闭文件&#xff0c;因为文件对象会占用操作系统的资源&#xff0c;并且操作系统同一时间能打开的文件数量也是有限的&#xff0c;由于文件读写时都有可能产生IOError&#xff0c;一旦出错&…

机器学习算法示例的收集;MetaAI编码工具Code Llama;“天工AI搜索”首发实测

&#x1f989; AI新闻 &#x1f680; Meta推出新一代AI编码工具Code Llama&#xff0c;助力程序员提高开发效率 摘要&#xff1a;Meta推出Code Llama&#xff0c;这是一个基于Llama 2语言模型打造的AI编码工具&#xff0c;能够生成新的代码并调试人类编写的工作。Code Llama可…

可控生成:ControlNet原理

论文&#xff1a;Adding Conditional Control to Text-to-Image Diffusion Models 代码&#xff1a;lllyasviel/ControlNet 简单来说ControlNet希望通过输入额外条件来控制大型图像生成模型&#xff0c;使得图像生成模型根据可控。 1. 动机 当前文生图任务中会出现如下问题&…

git私房菜

文章目录 1、公司项目开发Git协作流程2、合并相关的操作3、Git常用命令总结 公司中如何使用Git协同开发的&#xff1f;本文将具体介绍开发模式&#xff0c;以及一些常用命令。 1、公司项目开发Git协作流程 公司一个完整的项目出来&#xff0c;项目的推进是在主分支master上进行…

Python钢筋混凝土结构计算.pdf-T001-混凝土强度设计值

以下是使用Python求解上述问题的完整代码&#xff1a; # 输入参数 f_ck 35 # 混凝土的特征抗压强度&#xff08;单位&#xff1a;MPa&#xff09; f_cd 25 # 混凝土的强度设计值&#xff08;单位&#xff1a;MPa&#xff09; # 求解安全系数 gamma_c f_ck / f_cd # …

EXCEL中点击单元格,所在行和列都改变颜色

在日常工作中&#xff0c;尤其是办公室工作人群&#xff0c;尝尝需要处理大量的数据&#xff0c;在对数据进行修改时&#xff0c;时长发生看错行的事情&#xff0c;导致数据越改越乱&#xff0c;因此&#xff0c;我常用的一种方法就是选中单元格时&#xff0c;所在行、列标记为…

python基础教程:re模块用法详解

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一、正则表达式的特殊字符介绍 正则表达式 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff0c;尽在下方&#xff0c;赶紧点击了解吧~ 素材、视频教程、完整代码、插件安装教程我都准备好了&a…

家政保洁行业小程序如何快速搭建

随着互联网的快速发展&#xff0c;家政保洁行业也逐渐向数字化转型。小程序作为一种轻量级应用&#xff0c;越来越成为各行各业进行线上推广的重要工具。那么&#xff0c;如何快速搭建家政保洁行业的小程序呢&#xff1f;本文将为你提供详细的步骤和指导。 一、准备开发环境 在…