文件 或者 图片 与 base64 之间的转换
2024-04-10 06:09:45
1. 字符串与base64互转
// var base64 = window.btoa(window.encodeURIComponent(str)) // 简写：字符串转base64var str = '读取文件'//字符串转base64function encode(str) {// 对字符串进行编码var encode = encodeURI(str);// 对编码的字符串转化base64var base64 = btoa(encode);return base64;}var base64 = encode(str)console.log('格式', base64); // JUU4JUFGJUJCJUU1JThGJTk2JUU2JTk2JTg3JUU0JUJCJUI2******************************************************************************************// base64转字符串function decode(base64) {// 对base64转编码var decode = atob(base64);// 编码转字符串var str = decodeURI(decode);return str;}var string = decode(base64)console.log(string); // 读取文件2. base64与图片互转
原文链接：https://www.jianshu.com/p/90fc1f9042a8
js将图片转化为base64
<script>function getBase64Image(img) {var canvas = document.createElement("canvas"); // 创建canvas标签canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();console.log('ext', ext); // jpgvar dataURL = canvas.toDataURL("image/" + ext);return dataURL;}// sourceImgUrl 就是你的图片路径 var sourceImgUrl = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3285976294,962780269&fm=26&gp=0.jpg";var image = new Image();image.setAttribute("crossOrigin", 'Anonymous'); // 图片跨域处理image.src = sourceImgUrl;image.onload = function () {var base64 = getBase64Image(image);console.log(base64);}</script>
js将base64转化为图片格式
<body><img alt="" id="img">
</body><script>var base64Img = 'data:image/png;base64,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'document.getElementById('img').setAttribute('src', base64Img)
</script>3. 文件转base64的方法
3.1 拖拽文件
任意文件转base64-直接拖进来
原文链接：https://www.zhangxinxu.com/sp/base64.html
<!doctype html>
<html><head><meta charset="utf-8"><meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" /><meta name="keywords" content="base64, FileReader, readAsDataURL, 文件" /><meta name="author" content="谢勇彬，XYB" /><title>任意文件转base64-直接拖进来</title><style>body {word-break: break-all;margin: 0 1em;min-height: 100vh;font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;overflow: hidden;}.empty::before {position: absolute;font-size: 50px;content: '任意文件\A拖到这里';white-space: pre;left: 50%;top: 50%;transform: translate(-50%, -50%);color: gray;}</style>
</head><body class="empty"><script>window.addEventListener("dragenter", function (event) { event.preventDefault(); }, false);window.addEventListener("dragover", function (event) { event.preventDefault(); }, false);window.addEventListener("drop", function (event) {var reader = new FileReader();reader.onload = function (e) {document.body.insertAdjacentHTML("afterBegin", '<p>' + e.target.result + '</p>');document.body.classList.remove('empty');};reader.readAsDataURL(event.dataTransfer.files[0]);event.preventDefault();}, false);</script>
3.2 选择文件 或者 图片
原文链接：https://www.cnblogs.com/webuserlast/p/4842498.html
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简单的html5 File测试 for pic2base64</title><style></style><script>window.onload = function () {var input = document.getElementById("fielinput");var txshow = document.getElementById("txshow");if (typeof (FileReader) === 'undefined') {result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";input.setAttribute('disabled', 'disabled');} else {input.addEventListener('change', readFile, false);txshow.onclick = function () { input.click(); }}}function readFile() {var file = this.files[0];//判断是否是图片类型/*if (!/image\/\w+/.test(file.type)) {alert("只能选择图片");return false;}*/var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {txshow.src = this.result;document.getElementById("data").innerText = this.result.substring(this.result.indexOf(',') + 1);}}</script>
</head><body><input type="file" id="fielinput" /><img id="txshow" style="width:100px;height:100px;" /><br />解析之后的base64数据：<br /><p id="data"></p>
</body></html>
文件 或者 图片 与 base64 之间的转换相关推荐
- Java实现图片和Base64之间的相互转化
目录 一.简介 二.maven依赖 三.工具类 四.测试 一.简介 工作中调用第三方接口的时候,比如(人脸识别,身份证识别,文字识别等等)有时是图片,有时是Base64的字符串,一般前端上传的都是 ...
- python 图片与二进制之间的转换
一:PIL格式图片转成二进制 先读取为PIL格式,再转为二进制 import io import base64 from PIL import Imagedef image2byte(image):' ...
- [转]IE下对文件（图片）进行base64转换
原文地址:http://www.blogjava.net/emu/archive/2011/08/28/357431.html @import url(http://www.blogjava.net/ ...
- python输出矩阵图片_Python图片与其矩阵数据互相转换
程序 # coding=gbk from PIL import Image import numpy as np # import scipy import matplotlib.pyplot as ...
- python将图片导出数据库_python 将图片转换为base64编码转储进数据库
# _*_ coding: utf-8 _*_ #中间件:拓展工具遍历文件夹,对文件夹图片进行base64编码,写入数据库,并且读取查找方法 __author__ = 'wf15038' __date ...
- python 图片和base64互转的三种方式
通过cv2进行转换 import cv2 import base64 import numpy as npdef img_to_base64(img_array):# 传入图片为RGB格式numpy矩 ...
- 图片文件,图片文件流和BASE64加密字符串之间的转换,以及图片的BASE64加密字符串再jsp上如何显示
*本事例主要讲了如下几点: * 1:将图片转换为BASE64加密字符串. * 2:将图片流转换为BASE64加密字符串. * 3:将BASE64加密字符串转换为图片. * 4:在jsp文件中以引 ...
- Java之Base64实现文件和字符串之间的转换
摘要:Java通过Base64加密解密实现文件和字符串之间的转换! Base64.java package com.qdexam.util;import java.io.FileInputStream ...
- java编写之jpg图片与base64编码之间的转换
/** * @author zyq * 将网络图片进行Base64位编码 * @param imgUrl * */ public static String encodeWebImageToBase6 ...
- c#中字节数组byte[]、图片image、流stream，字符串string、内存流MemoryStream、文件file，之间的转换
字节数组byte[]与图片image之间的转化 字节数组转换成图片 public static Image byte2img(byte[] buffer) {MemoryStream ms = new ...
最新文章
- 云计算：革新动力并不是一把万能钥匙
- Android------Android.mk调用shell脚本
- 蓝桥杯-2的次幂表示（java）
- Linux vim剪切/删除命令（结合p粘贴使用就是剪切）
- js 技巧杂引(转)
- IDEA导入Eclipse项目
- 动手学深度学习(PyTorch实现)(九)--VGGNet模型
- 5006.c++类中使用static变量bug
- 多库多事务降低数据不一致概率
- Android 系统性能优化（21）---App启动原理分析及启动时间优化
- .Net FSO简单小结（简单到不能再简单了）
- C++：表达式求值（四则运算）实现
- java od_OD使用教程
- html5怎么写副标题,毕业论文副标题怎么写
- 阿里面试必过的 Java 面试参考指南全集
- DVWA关卡11：Reflected Cross Site Scripting (XSS)（反射型XSS）
- 制定新的计划，走起（r13笔记第1天）
- NBA季后赛总抢断排行榜（数据截止至11年5月5日）
- Tensorflow学习笔记——tf.set_random_seed函数
- Amazon SP-API文档看着累？那就看这里！