js中base64编码应用

参考链接:http://www.cnblogs.com/faith3/p/6371477.html

 

使用JS的FileReader对象来实现对图片进行base64编码

1、检查浏览器对FileReader的支持

if(window.FileReader){

var fr = new FileReader();

}

 

2、使用FileReader的readAsDataURL方法

fr.readAsDataURL(file);

fr.onload = function() { var reslut = this.result; //得到编码后的字符串数据 };

 

 

例:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>FileReader</title>

</head>

<body>

<p>

<label>请选择一个文件:</label>

<input type="file" id="file" />

<input type="button" value="读取图像" οnclick="readAsDataURL()" />

<input type="button" value="读取二进制数据" οnclick="readAsBinaryString()" />

<input type="button" value="读取文本文件" οnclick="readAsText()" />

</p>

<div id="result" name="result"></div>

</body>

</html>

 

<script type="text/javascript">

var result=document.getElementById("result");

var file=document.getElementById("file");

//判断浏览器是否支持FileReader接口

if(typeof FileReader == 'undefined'){

result.InnerHTML="<p>你的浏览器不支持FileReader接口!</p>";

//使选择控件不可操作

file.setAttribute("disabled","disabled");

}

function readAsDataURL(){

//检验是否为图像文件

var file = document.getElementById("file").files[0];

if(!/image\/\w+/.test(file.type)){

alert("看清楚,这个需要图片!");

return false;

}

var reader = new FileReader();

//将文件以Data URL形式读入页面

reader.readAsDataURL(file);

reader.οnlοad=function(e){

var result=document.getElementById("result");

//显示文件

result.innerHTML='<img src="' + this.result +'" alt="" />';

}

}

</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将文本或图片转换为Base64编码,可以使用JavaScript来实现。下面是一个示例代码,演示了如何使用JavaScript将文本转换为Base64编码: ```javascript function textToBase64(text) { const base64 = btoa(unescape(encodeURIComponent(text))); return base64; } const inputText = "Hello, World!"; const base64Text = textToBase64(inputText); console.log(base64Text); ``` 在此示例,`textToBase64`函数接受一个文本参数,并使用`btoa`函数将文本转换为Base64编码。然后,我们使用`encodeURIComponent`对文本进行编码以确保不会丢失任何字符,并使用`unescape`解码编码的结果。最后,我们将结果返回为Base64编码的字符串。 要将图片转换为Base64编码,可以使用以下示例代码: ```javascript function imageToBase64(imageUrl) { return new Promise((resolve, reject) => { const image = new Image(); image.crossOrigin = "Anonymous"; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); const base64 = canvas.toDataURL(); resolve(base64); }; image.onerror = (error) => { reject(error); }; image.src = imageUrl; }); } const inputImageUrl = "https://example.com/image.jpg"; imageToBase64(inputImageUrl) .then((base64Image) => { console.log(base64Image); }) .catch((error) => { console.error(error); }); ``` 在此示例,`imageToBase64`函数接受一个图片URL作为参数,并返回一个Promise,该Promise在图片加载和转换为Base64编码后解析。我们创建一个`Image`对象,并设置其`crossOrigin`属性为"Anonymous"以避免跨域问题。在图片加载完成后,我们创建一个`canvas`元素,并将图片绘制到该canvas上。然后,我们使用`toDataURL`将canvas的内容转换为Base64编码的字符串,并将结果解析为Promise的解析值。 请注意,上述示例代码的示例输入文本和图片URL仅供演示目的,需要根据实际情况进行替换。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript实现Base64编码转换](https://download.csdn.net/download/weixin_38590520/14805219)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [base64:js实现base64编码解码](https://download.csdn.net/download/weixin_42117340/19693137)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [使用GPT-3大预言模型生成文本的基本的框架和关键代码片段来实现GPT-3和BERT的应用案例.txt](https://download.csdn.net/download/weixin_44609920/88224217)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值