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

【base64】JavaScriptuniapp 将图片转为base64并展示

news 文章来源：https://blog.csdn.net/weixin_52479803/article/details/132318185 2025/4/20 18:56:17

Base64是一种用于编码二进制数据的方法，它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中，通过将二进制数据转换为可打印字符的形式进行传输

JavaScript

压缩图片

<html><body><script src="https://code.jquery.com/jquery-1.11.3.js"></script><input id="file" type="file" accept="image/*"><br>压缩后的图片：<span id="sz"></span><br><img id="pic"><script>var base64, base64_2, base64_3;// 选择图片$("#file").change(function () {var m_this = this;cutImageBase64(m_this, 900, 0.7);})function cutImageBase64(m_this, wid, quality) {var file = m_this.files[0];// 获取当前浏览器的URL对象var URL = window.URL || window.webkitURL;// 该方法会返回一个代表文件的Blob URL。Blob URL是一个特殊的URL，可以用来临时表示二进制数据（比如文件、图像等）var blob = URL.createObjectURL(file);var img = new Image();img.src = blob;img.onload = function () {var that = this;//生成比例var w = that.width,h = that.height,scale = w / h;w = wid || w;h = w / scale;//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');$(canvas).attr({width: w,height: h});// 将指定的图像绘制到Canvas上// 参数依次表示图像源、起始点的X坐标、起始点的Y坐标、绘制的宽度和高度ctx.drawImage(that, 0, 0, w, h);// 将Canvas上的图像转换为Base64编码的数据// 参数依次表示图像类型、图像质量base64 = canvas.toDataURL('image/jpeg', quality || 0.9);document.getElementById("pic").src = base64;document.getElementById("sz").innerHTML = parseInt(base64.length / 2014, 0) + "kb";};}</script>
</body></html>

 图片大小从1.36MB到169kb

加密图片

上面的代码中，toDataURL产生的是图片的base64编码，Base64编码必须是完整且正确才能正常显示图片。而只需对此编码做小小修改，哪怕仅是改动一个字符，也会让图片无法正常显示

代码如下：

<html><body><script src="https://code.jquery.com/jquery-1.11.3.js"></script><input id="file" type="file" accept="image/*"><br>压缩后的图片：<span id="sz"></span><br><img id="pic"><a onclick="jm()">点此解密并显示图片</a><script>var base64, base64_2, base64_3;// 选择图片$("#file").change(function () {var m_this = this;cutImageBase64(m_this, 900, 0.7);})function jm() {var pass = prompt('请输入口令', '');if (pass != "123") {alert("口令错误。");}else {base64_2 = document.getElementById("pic").src.toString();//解密base64_3 = base64_2.substring(0, 26) + base64_2.substring(27, base64_2.length);document.getElementById("pic").src = base64_3;console.log(base64_3)}}function cutImageBase64(m_this, wid, quality) {var file = m_this.files[0];// 获取当前浏览器的URL对象var URL = window.URL || window.webkitURL;// 该方法会返回一个代表文件的Blob URL。Blob URL是一个特殊的URL，可以用来临时表示二进制数据（比如文件、图像等）var blob = URL.createObjectURL(file);var img = new Image();img.src = blob;img.onload = function () {var that = this;//生成比例var w = that.width,h = that.height,scale = w / h;w = wid || w;h = w / scale;//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');$(canvas).attr({width: w,height: h});// 将指定的图像绘制到Canvas上// 参数依次表示图像源、起始点的X坐标、起始点的Y坐标、绘制的宽度和高度ctx.drawImage(that, 0, 0, w, h);// 将Canvas上的图像转换为Base64编码的数据// 参数依次表示图像类型、图像质量base64 = canvas.toDataURL('image/jpeg', quality || 0.9);// document.getElementById("pic").src = base64;document.getElementById("pic").src = base64.substring(0, 26) + 'a' + base64.substring(26, base64.length);document.getElementById("sz").innerHTML = parseInt(base64.length / 2014, 0) + "kb";};}</script>
</body></html>

 

虽然图片编码经过了加密，而且增加了口令保护，但是只要查看网页源码，就可以知道口令，这样完全没有起到加密的效果

js代码加密

JS加密、JS混淆 - JShaman：专业JS代码混淆加密平台

直接将加密后的代码替换成以前的代码即可，如下：

uniapp 

 效果图：

 编码：

<template><view class="container"><button @click="chooseImage">选择图片</button><image v-if="base64Image" :src="base64Image"></image></view>
</template><script>export default {data() {return {base64Image: ''};},methods: {chooseImage() {let _this = thisuni.chooseImage({count: 1,success(res) {const tempFilePath = res.tempFilePaths[0];uni.getFileSystemManager().readFile({filePath: tempFilePath,encoding: "base64",success(data) {console.log("图片的Base64数据:", data.data);_this.base64Image = "data:image/jpeg;base64," + data.data;},fail(error) {console.log("读取文件失败:", error);}});},fail(error) {console.log("选择图片失败:", error);}});}}}
</script><style>.container {margin: 20px;}
</style>

注解：

_this.base64Image = "data:image/jpeg;base64," + data.data表示什么？

this.base64Image是一个用于在视图中展示图片的数据绑定。通过给this.base64Image赋值一个以"data:image/jpeg;base64,"开头的字符串，然后将Base64编码的图片数据拼接在后面，就可以将这个Base64格式的图片数据作为URL来展示在页面上

uni.chooseImage？

从本地相册选择图片或使用相机拍照

文档：uni.chooseImage(OBJECT) | uni-app官网

uni.getFileSystemManager().readFile({})?

使用uni-app中FileSystemManager的readFile方法读取文件

文档：uni.getFileSystemManager() | uni-app官网

filePath（必填）：要读取的文件路径，可以是相对路径或绝对路径。

encoding（可选）：文件的编码格式，默认值为 'utf8'。如果需要将文件内容转换为 Base64 格式，则需要将该值设置为 'base64'。

success（可选）：文件读取成功后的回调函数，接收一个参数表示读取到的文件数据。

fail（可选）：文件读取失败时的回调函数，接收一个参数表示错误信息。

相关文章：

【base64】JavaScriptuniapp 将图片转为base64并展示

Base64是一种用于编码二进制数据的方法&#xff0c;它将二进制数据转换为文本字符串。它的主要目的是在网络传输或存储过程中&#xff0c;通过将二进制数据转换为可打印字符的形式进行传输 JavaScript 压缩图片 <html><body><script src"https://code.j…...

编程日记 2023/8/30 19:44:55

根据一个List生成另外一个List，修改其中一个，导致另外一个List也在变化

1、两个List复制 SysDic aSysDic new SysDic(); aSysDic.setDkey("1"); aSysDic.setDnote("12"); SysDic bSysDic new SysDic(); bSysDic.setDkey("2"); bSysDic.setDnote("23"); …...

编程日记 2023/8/30 19:43:53

Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置

文章目录 需求分析解决 需求 Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置 分析 在搜寻多种解决方案后&#xff0c;最后总结出 自己的解决方案 方案一&#xff0c;没看懂 var geojsonOptions {clampToGround : true //使数据贴地};var entities;promise Cesium…...

编程日记 2023/8/30 19:42:52

windows系统配置tcp最大连接数

打开注册表 运行->regedit HKLM\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters目录下 增加一个MaxUserPort&#xff08;默认值是5000&#xff0c;端口范围是1025至5000&#xff09;MaxUserPort设置为65534&#xff08;需重启服务器&#xff09; 执行dos命令&…...

编程日记 2023/8/30 19:41:51

SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解

今天在写SQL Server存储过程中遇到的&#xff0c;做个整理归纳 USE [ABInbevDB] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO实际上&#xff0c;我们在创建存储过程的时候&#xff0c;这几行的代码是会自动创建出来的&#xff0c;那么先解释下两个标准的概念。 两个…...

编程日记 2023/8/30 19:40:48

C语言——程序执行的三大流程

顺序 : 从上向下&#xff0c; 顺序执行代码分支 : 根据条件判断&#xff0c; 决定执行代码的分支循环 : 让特定代码重复的执行...

编程日记 2023/8/30 19:39:47

二级MySQL（十）——单表查询

这里我们只在一个表内查询&#xff0c;用到的是较为简单的SELECT函数形式 1、查询指定的字段&#xff1a; 用到的数据库是之前提到的S、P、SP数据库 S表格用到的总数据&#xff1a; 首先我们查询所有供应商的序号和名字 这时都是独立的&#xff0c;没有关系&#xff0c;我们找…...

编程日记 2023/8/30 19:38:45

机器学习：无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…...

编程日记 2023/8/30 19:37:44

计算机网络之5层网络协议

文章目录 引言一、OSI七层模型二、TCP/IP参考模型三、网络协议的概念和作用四、TCP/IP参考模型每层详细介绍1.物理层2.数据链路层1. 基本概念2.MAC地址3.ARP协议 3. 网络层1. 基本概念2.ip协议3.子网掩码 4. 传输层1. 基本概念2. 协议3. TCP&#xff08;三次握手四次挥手&#…...

编程日记 2023/8/30 19:36:43

常见前端面试之VUE面试题汇总十一

31. Vuex 有哪几种属性&#xff1f; 有五种&#xff0c;分别是 State、 Getter、Mutation 、Action、 Module state > 基本数据(数据源存放地) getters > 从基本数据派生出来的数据 mutations > 提交更改数据的方法&#xff0c;同步 actions > 像一个装饰器&a…...

编程日记 2023/8/30 19:35:37

2021年12月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;书架 John最近买了一个书架用来存放奶牛养殖书籍&#xff0c;但书架很快被存满了&#xff0c;只剩最顶层有空余。 John共有N头奶牛(1 ≤ N ≤ 20,000)&#xff0c;每头奶牛有自己的高度Hi(1 ≤ Hi ≤ 10,000)&#xff0c;N头奶牛的总高度为S。书架高度为B(1 ≤…...

编程日记 2023/8/30 19:34:36

解决 git clone 时出现Failed to connect to 127.0.0.1 port 1573问题

今天去拉一个仓库代码&#xff0c;往常都是一下就拉下来了&#xff0c;今天却报错&#xff0c;报错信息如下&#xff1a; 原因&#xff1a;这种情况是因为代理在git中配置的&#xff0c;但是本身环境就有SSL协议了&#xff0c;所以取消git的https或者http代理即可 方法如下&…...

编程日记 2023/8/30 19:33:35

日本核污染水排海，有必要囤盐吗？

据央视新闻24日报道&#xff0c;当地时间8月24日13时&#xff0c;日本福岛第一核电站启动污水排海。消息一出&#xff0c;全球哗然。虽然事情已经过去了几天&#xff0c;但是&#xff0c;随着这一举动&#xff0c;大家就乱了阵脚&#xff0c;恐惧者有之&#xff0c;辱骂者有之&…...

编程日记 2023/8/30 19:32:32

windows 10自带命令查看文件的哈希值

windows的powershell自带了查看文件哈希值的命令&#xff1a; Get-FileHash 文件名 -Algorithm MD5/SHA1/SHA256 【案例】 查看文件的MD5值&#xff1a; 查看文件的SHA1值&#xff1a; 查看文件的SHA256值&#xff1a;...

编程日记 2023/8/30 19:31:30

ssm+vue理发店会员管理系统源码和论文

ssmvue理发店会员管理系统源码和论文089 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&a…...

编程日记 2023/8/30 19:30:29

Python的for循环

for语法&#xff1a; """ for 临时变量 in 待处理数据集(序列):循环满足条件时执行的代码 """ 例子&#xff1a; name "itheima is a brand of itcast" count 0 for i in name:if i "a":count 1 print(f"a的数量…...

编程日记 2023/8/30 19:29:28

爬虫逆向实战（二十七）--某某招标投标网站招标公告

一、数据接口分析 主页地址&#xff1a;某网站 1、抓包 通过抓包可以发现数据接口是page 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现&#xff0c;请求参数是一整个密文 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 通…...

编程日记 2023/8/30 19:28:26

线程和之间的通讯方式、进程之间的通讯方式、线程之间如何同步

通信是指线程之间以何种机制来交换信息&#xff0c;同步是指程序中用于控制不同线程间操作发生相对顺序的机制 进程由线程组成&#xff0c;所以进程中有的通讯机制线程中全都有 线程的通讯方式&#xff1a; 1. 锁机制&#xff1a;包括互斥锁、条件变量、读写锁 互斥锁提供了以…...

编程日记 2023/8/30 19:27:25

CRM线索公海如何管理？

对于销售和CRM客户管理而言&#xff0c;公海线索的管理极为重要&#xff0c;今天本文将告诉大家&#xff1a; 1、如何合理设置公海线索规则和流程&#xff1f;2、手把手教你完成公海管理系统的搭建 关于CRM的公海管理问题&#xff0c;需要根据企业的具体情况和销售流程来设置…...

编程日记 2023/8/30 19:26:24

创建web应用程序，React和Vue怎么选？

React和Vue都是创建web应用程序的绝佳选择。React得到了科技巨头和庞大的开源社区的支持&#xff0c;代码库可以很大程度地扩展&#xff0c;允许你创建企业级web应用程序。React拥有大量合格甚至优秀的开发人员粉丝&#xff0c;可以解决你在开发阶段可能遇到的任何问题。 毫无疑…...

编程日记 2023/8/30 19:25:23

【每日一题】1267. 统计参与通信的服务器

【每日一题】1267. 统计参与通信的服务器 1267. 统计参与通信的服务器题目描述解题思路 1267. 统计参与通信的服务器 题目描述 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有…...

编程日记 2023/8/30 19:24:21

Python入门教程29：字符串前加r、u、b、f是什么意思？

★★★★★博文原创不易&#xff0c;我的博文不需要打赏&#xff0c;也不需要知识付费&#xff0c;可以白嫖学习编程小技巧&#xff0c;喜欢的老铁可以多多帮忙点赞&#xff0c;小红牛在此表示感谢。★★★★★ 关键字参数字符串前加上r、u、b和f&#xff0c;分别表示不同的字…...

编程日记 2023/8/30 19:23:17

java8 IntStream.range

简介 IntStream.range是Java 8中的一个方法&#xff0c;它是java.util.stream.IntStream类中的静态方法。这个方法用于生成一个顺序排列的整数流&#xff0c;包含起始值但不包含结束值。可以使用以下代码调用IntStream.range方法&#xff1a; IntStream.range(int startInclu…...

编程日记 2023/8/30 19:22:16

数据库集群的简单了解

Update 关于操作的日志 1.0 redo log 读一次写一次 一共2次, 不安全 注意redo log是顺写 而file是随机 所以Mysql做出类似HDFS的操作 行为日志和数据分离&#xff0c;但是不同的是&#xff0c;Mysql在内存中操作修改&#xff0c;如果不出事故&#xff0c;由内存中的行为来直接…...

编程日记 2023/8/30 19:21:15

CSS中如何实现文字阴影效果（text-shadow）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现思路⭐ 示例⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前…...

编程日记 2023/8/30 19:20:13

Nginx从入门到精通(超级详细)

文章目录 一、什么是Nginx1、正向代理2、反向代理3、负载均衡4、动静分离 二、centos7环境安装Nginx1、安装依赖2、下载安装包3、安装4、启动5、停止 三、Nginx核心基础知识1、nginx核心目录2、常用命令3、默认配置文件讲解4、Nginx虚拟主机-搭建前端静态服务器5、使用nignx搭建…...

编程日记 2023/8/30 19:19:10

为何反射探针关闭Mipmap后变成了白图

1&#xff09;为何反射探针关闭Mipmap后变成了白图 2&#xff09;2021.3 Android从AssetBundle中加载视频播放失败问题 3&#xff09;SBP是否可以解决打包时FBX等模型文件中额外的GameObject 4&#xff09;Addressables加载已打包过的Prefab后Mono脚本丢失 这是第349篇UWA技术知…...

编程日记 2023/8/30 19:18:09

成都睿趣科技：抖音开网店前期的流程是什么

随着互联网的快速发展&#xff0c;电子商务成为了商业领域中的一大利器&#xff0c;而在电商领域中&#xff0c;抖音作为一个强大的平台&#xff0c;也吸引了众多商家的目光。然而&#xff0c;要在抖音上开设一家成功的网店&#xff0c;并不是一件简单的事情&#xff0c;需要经…...

编程日记 2023/8/30 19:17:08

机房安全之道：构筑坚固的网络防线

引言&#xff1a; 在数字化时代&#xff0c;机房成为了许多组织和企业的核心基础设施&#xff0c;承载着重要的数据和应用。然而&#xff0c;随着网络攻击日益猖獗&#xff0c;机房的安全性显得尤为重要。本文将深入探讨如何构建坚固的网络防线&#xff0c;保护机房免受攻击的方…...

编程日记 2023/8/30 19:16:07

使用GoLand进行远程调试

对部署进行配置 在此配置远程服务器地址&#xff0c;映射&#xff0c;是否自动上传(更新)等 选择SFTP类型 选择上传 另外给自动上传选项打钩 此时在本地修改某个文件&#xff0c;远程机器相应目录的文件&#xff0c;也会被同步修改 对远程调试进行配置 远程机器需要安装delve 而…...

编程日记 2023/8/30 19:15:06