将图片转化为base64

解释说明:我先是从本地选择一张图片,确定之后会显示图片的预览,有个隐藏域会存着我base64的码,然后提交的时候会存在数据库中,在数据库中,存base64的那个字段的类型得是text或者是longtext,在选择图片的时候,选择特别大的图片是不会转化为base64的,也存不到数据库中

1.在jsp上写上相应的代码

<td class="td_marked">上传图片:</td>
<td class="td_content">
	<input type="file" id="fielinput" hidden="hidden"> 
	<img id="txshow" style="width: 100px; height: 100px;" alt="请点击选择图片" /> 
	<textarea rows="3" id="base" style="width: 100%;" name="photoStr" hidden="hidden">         </textarea>
</td>

2.在js文件中进行转化

    /**
	 * js上传图片转为base64
	 */
	function base() {
		var input = document.getElementById("fielinput");
		var txshow = document.getElementById("txshow");
		input.addEventListener('change', readFile, true);
		txshow.onclick = function() {
			input.click();
		}
	}

	function readFile() {
		var file = this.files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = function(e) {
			txshow.src = this.result;
			$("#base").val(this.result);
		}
	}

 

在 JavaScript 中将图片换为 Base64 编码是一种常见的操作,尤其是在前端处理文件上传、图像预览等场景中。以下是几种实现方式: ### 使用 `FileReader` 将图片文件换为 Base64 这是最常用的方法,适用于浏览器环境,通过 `FileReader` 对象读取文件内容并将其换为 Base64 编码的 Data URL。 ```javascript function convertImageToBase64(file, callback) { const reader = new FileReader(); reader.onload = function(e) { callback(e.target.result); // 返回包含 Base64 的 Data URL }; reader.onerror = function(error) { console.error("读取文件时出错:", error); }; reader.readAsDataURL(file); } // 使用示例:监听文件输入框的变化 document.getElementById('upload').addEventListener('change', function(e) { const file = e.target.files[0]; convertImageToBase64(file, function(base64String) { console.log(base64String); // 输出类似 data:image/png;base64,iVBORw0KGgoAAAANSUhEUg... }); }); ``` 此方法适用于用户通过 `<input type="file">` 选择本地图片文件的情况,并能够将图片立即换为 Base64 编码,以便后续处理或上传。 ### 使用 `fetch` 和 `Blob` 从远程 URL 获取图片换为 Base64 如果图片来源于远程 URL,可以通过 `fetch` 获取图片资源并将其换为 Base64 编码。 ```javascript async function convertRemoteImageToBase64(url) { const response = await fetch(url); const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); reader.readAsDataURL(blob); }); } // 使用示例 convertRemoteImageToBase64('https://example.com/image.png').then(base64 => { console.log(base64); // 输出远程图片Base64 编码 }); ``` 该方法适用于从网络上加载图片并将其换为 Base64 编码,以便在页面中直接使用或进行其他处理。 ### 使用 Vue 实现图片换为 Base64 如果你正在使用 Vue 框架,可以结合 `FileReader` 实现一个简单的组件来处理图片上传并显示其 Base64 编码。 ```vue <template> <div> <input type="file" @change="handleFileChange" accept="image/*" /> <img v-if="base64Image" :src="base64Image" alt="预览图" /> <p v-if="base64Image">Base64 编码:</p> <textarea v-if="base64Image" :value="base64Image" rows="5" cols="50" readonly></textarea> </div> </template> <script> export default { data() { return { base64Image: null }; }, methods: { handleFileChange(event) { const file = event.target.files[0]; if (file) { this.convertToBase64(file); } }, convertToBase64(file) { const reader = new FileReader(); reader.onload = e => { this.base64Image = e.target.result; }; reader.onerror = error => { console.error("读取文件失败:", error); }; reader.readAsDataURL(file); } } }; </script> <style scoped> img { max-width: 300px; margin-top: 20px; } textarea { width: 100%; margin-top: 10px; } </style> ``` 此 Vue 组件允许用户上传图片文件,并将选中的图片立即换为 Base64 编码,同时在页面上显示预览图和编码字符串。 ### 注意事项 - Base64 编码的数据体积通常比原始二进制数据大 33% 左右,因此对于大文件应谨慎使用。 - 使用 Base64 编码嵌入图片可以减少 HTTP 请求次数,但可能会增加页面加载时间,影响性能。 - 在处理敏感文件时,确保在客户端进行适当的安全检查,避免潜在的安全风险。 [^1]: Base64 编码的基本概念和应用场景。 [^2]: 提供了 JavaScript 和其他语言实现将图片换为 Base64 编码的方法。 [^3]: 提供了 Vue 框架中实现图片换为 Base64 编码的完整代码示例。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值