如何使用JavaScript将图像转换为Base64字符串？
我需要将图像转换为Base64字符串，以便将图像发送到服务器如何使用JavaScript将图像转换为Base64字符串？,javascript,base64,Javascript,Base64,我需要将图像转换为Base64字符串，以便将图像发送到服务器 有JavaScript文件吗？否则，我如何转换它？您可以使用，但它几乎不受支持。您可以使用HTML5进行转换： 创建画布，将图像加载到画布中，然后使用获取Base64表示（实际上，它是一个数据：URL，但它包含Base64编码的图像）。如果您使用，它为我们提供了一种直接编码或解码Base64的方法 试试这个： 要使用dojox.encoding.base64对字节数组进行编码，请执行以下操作： var str = dojox.enco
有JavaScript文件吗？否则，我如何转换它？您可以使用，但它几乎不受支持。您可以使用HTML5
数据：var str = dojox.encoding.base64.encode(myByteArray);
var bytes = dojox.encoding.base64.decode(str);
有多种方法可供选择： 1.方法：文件阅读器 将图像作为blob via加载，并使用（）将其转换为： 函数toDataURL（url，回调）{ var xhr=new XMLHttpRequest（）； xhr.onload=函数（）{ var reader=new FileReader（）； reader.onloadend=函数（）{ 回调（reader.result）； } reader.readAsDataURL（xhr.response）； }; xhr.open（'GET'，url）； xhr.responseType='blob'； xhr.send（）； } toDataURL（'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0，函数（dataUrl）{ console.log（'RESULT:'，dataUrl）
})此代码段可以将字符串、图像甚至视频文件转换为Base64字符串数据
函数encodeImageFileAsURL（）{
var fileselected=document.getElementById（“inputFileToLoad”）.files；
如果（fileselected.length>0）{
var fileToLoad=fileselected[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）{
var srcData=fileloadevent.target.result；//据我所知，可以通过FileReader（）将图像转换为Base64字符串，或者将其存储在canvas元素中，然后使用toDataURL（）获取图像。我遇到了类似的问题，您可以参考这一点
以下是我所做的：
// Author James Harrington 2014
function base64(file, callback){
var coolFile = {};
function readerOnload(e){
var base64 = btoa(e.target.result);
coolFile.base64 = base64;
callback(coolFile)
};
var reader = new FileReader();
reader.onload = readerOnload;
var file = file[0].files[0];
coolFile.filetype = file.type;
coolFile.size = file.size;
coolFile.filename = file.name;
reader.readAsBinaryString(file);
}
下面是你如何使用它
base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})
基本上，如果你的形象
<img id='Img1' src='someurl'>
请尝试以下代码：
对于文件上载更改事件，请调用此函数：
$("#fileproof").on('change', function () {
readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});
function readImage(inputElement) {
var deferred = $.Deferred();
var files = inputElement.get(0).files;
if (files && files[0]) {
var fr = new FileReader();
fr.onload = function (e) {
deferred.resolve(e.target.result);
};
fr.readAsDataURL(files[0]);
} else {
deferred.resolve(undefined);
}
return deferred.promise();
}
$（“#文件证明”）.on（'change'，function（）{
readImage（$（this））.done（函数（base64Data）{$（'#'））.val（base64Data）；}）；
});
函数readImage（inputElement）{
var deferred=$.deferred（）；
var files=inputElement.get（0）.files；
如果（文件和文件[0]）{
var fr=new FileReader（）；
fr.onload=功能（e）{
延迟。解决（如目标。结果）；
};
fr.readAsDataURL（文件[0]）；
}否则{
延迟。解决（未定义）；
}
延迟返回。承诺（）；
}
将Base64数据存储在隐藏字段中以供使用。如果您有一个文件对象，此简单功能将起作用：
function getBase64 (file, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(file);
}
用法示例：
getBase64(fileObjectFromInput, function(base64Data){
console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});
我发现最安全可靠的方法是使用FileReader（）
演示：
函数encode（）{
var selectedfile=document.getElementById（“myinput”）.files；
如果（selectedfile.length>0）{
var imageFile=selectedfile[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）{
var srcData=fileloadevent.target.result；
var newImage=document.createElement（'img'）；
newImage.src=srcData；
document.getElementById（“dummy”）.innerHTML=newImage.outerHTML；
document.getElementById（“txt”）.value=document.getElementById（“dummy”）.innerHTML；
}
fileReader.readAsDataURL（imageFile）；
}
}
更新-与@AnniekJ请求的注释相同的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
// Get the file objects that was selected by the user from myinput - a file picker control
var selectedfile = document.getElementById("myinput").files;
// Check that the user actually selected file/s from the "file picker" control
// Note - selectedfile is an array, hence we check it`s length, when length of the array
// is bigger than 0 than it means the array containes file objects
if (selectedfile.length > 0) {
// Set the first file object inside the array to this variable
// Note: if multiple files are selected we can itterate on all of the selectedfile array using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected
var imageFile = selectedfile[0];
// Set a filereader object to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
var fileReader = new FileReader();
// We declare an event of the fileReader class (onload event) and we register an anonimous function that will be executed when the event is raised. it is "trick" we preapare in order for the onload event to be raised after the last line of this code will be executed (fileReader.readAsDataURL(imageFile);) - please read about events in javascript if you are not familiar with "Events"
fileReader.onload = function(fileLoadedEvent) {
// AT THIS STAGE THE EVENT WAS RAISED
// Here we are getting the file contents - basiccaly the base64 mapping
var srcData = fileLoadedEvent.target.result;
// We create an image html element dinamically in order to display the image
var newImage = document.createElement('img');
// We set the source of the image we created
newImage.src = srcData;
// ANOTHER TRICK TO EXTRACT THE BASE64 STRING
// We set the outer html of the new image to the div element
document.getElementById("dummy").innerHTML = newImage.outerHTML;
// Then we take the inner html of the div and we have the base64 string
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
// This line will raise the fileReader.onload event - note we are passing the file object here as an argument to the function of the event
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
函数encode（）{
//获取用户从myinput-文件选择器控件中选择的文件对象
var selectedfile=document.getElementById（“myinput”）.files；
//检查用户是否确实从“文件选择器”控件中选择了文件
//注意-selectedfile是一个数组，所以当数组的长度为
//大于0表示数组包含文件对象
如果（selectedfile.length>0）{
//将数组中的第一个文件对象设置为此变量
//注意：如果选择了多个文件，我们可以使用for循环对所有selectedfile数组进行初始化-但为了不使此示例变得复杂，我们只使用选择的第一个文件对象
var imageFile=selectedfile[0]；
//将filereader对象设置为异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
var fileReader=newfilereader（）；
//我们声明fileReader类的一个事件（onload事件），并注册一个将在引发事件时执行的匿名函数。这是我们预先准备的“技巧”，以便在执行此代码的最后一行后引发onload事件（fileReader.readAsDataURL（imageFile）；）-如果您不熟悉“事件”，请阅读javascript中的事件
fileReader.onload=函数（fileLoadedEvent）{
//在这个阶段，事件被提出
//这里我们得到的是文件内容——基本上是base64映射
var srcData=fileloadevent.target.result；
//为了显示图像，我们动态地创建了一个图像html元素
var newImage=document.createElement（'img'）；
//我们设置了我们创建的图像的来源
newImage.src=srcData；
//提取BASE64字符串的另一个技巧
//我们将新图像的外部html设置为div元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
var selectedfile = document.getElementById("myinput").files;
if (selectedfile.length > 0) {
var imageFile = selectedfile[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result;
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("dummy").innerHTML = newImage.outerHTML;
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
// Get the file objects that was selected by the user from myinput - a file picker control
var selectedfile = document.getElementById("myinput").files;
// Check that the user actually selected file/s from the "file picker" control
// Note - selectedfile is an array, hence we check it`s length, when length of the array
// is bigger than 0 than it means the array containes file objects
if (selectedfile.length > 0) {
// Set the first file object inside the array to this variable
// Note: if multiple files are selected we can itterate on all of the selectedfile array using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected
var imageFile = selectedfile[0];
// Set a filereader object to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
var fileReader = new FileReader();
// We declare an event of the fileReader class (onload event) and we register an anonimous function that will be executed when the event is raised. it is "trick" we preapare in order for the onload event to be raised after the last line of this code will be executed (fileReader.readAsDataURL(imageFile);) - please read about events in javascript if you are not familiar with "Events"
fileReader.onload = function(fileLoadedEvent) {
// AT THIS STAGE THE EVENT WAS RAISED
// Here we are getting the file contents - basiccaly the base64 mapping
var srcData = fileLoadedEvent.target.result;
// We create an image html element dinamically in order to display the image
var newImage = document.createElement('img');
// We set the source of the image we created
newImage.src = srcData;
// ANOTHER TRICK TO EXTRACT THE BASE64 STRING
// We set the outer html of the new image to the div element
document.getElementById("dummy").innerHTML = newImage.outerHTML;
// Then we take the inner html of the div and we have the base64 string
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
// This line will raise the fileReader.onload event - note we are passing the file object here as an argument to the function of the event
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
uploadProfile(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
const getBase64 = (file) => new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject('Error: ', error);
})
const _changeImg = (e) => {
const file = e.target.files[0];
let encoded;
getBase64(file)
.then((result) => {
encoded = result;
})
.catch(e => console.log(e))
}
//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
})
}
//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)