JS前端转换本地图片路径为base64，请问怎么实现,不能file. input上传
路径如下：
file:///C:/Users/XIAORU~1/AppData/Local/Temp/ksohtml13208/wps80.jpg
由于浏览器安全限制的原因，js是默认无法直接操作本地文件的，给你一个input的方式和只能运行在IE直接读取本地文件：
<input class="ut myHide" id="uploadFile" name="uploadFile" type="file" onchange="btnUploadFile(event)" />
<script>
function btnUploadFile(e){
//获取图片文件
var imgFile = e.target.files[0];
changeFileIntoBase64(imgFile).then(function(res){
console.log(res);
})
}
/**
* @description 转换文件成base64数据
* @param {Object} file - 文件对象
*/
function changeFileIntoBase64(file) {
return new Promise((resolve, reject) => {
const fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = (result) => {
const base64Str = result.currentTarget.result;
resolve(base64Str);
};
});
}
</script>
只兼容id，直接读取本地：
```javascript
<script>
var fso = new ActiveXObject('Scripting.FileSystemObject')
var fileName = 'C:\\Users\\Lenovo\\Desktop\\ai\\1.png'
var Filesss = fso.GetFile(fileName)
var base64str
var x = new ActiveXObject('Msxml2.XMLHTTP.6.0')
x.onreadystatechange = function(){
if(x.readyState < 4) return
var xml_dom = new ActiveXObject('MSXML2.DOMDocument')
var tmpNode = xml_dom.createElement('tmpNode')
tmpNode.dataType = 'bin.base64'
tmpNode.nodeTypedValue = x.responseBody
base64str = tmpNode.text.replace(/\n/g,'')
}
x.open('get',fileName,true)
x.send('')
console.log(base64str)
</script>
```
给一个可以参考的例子：https://blog.csdn.net/wang_9909/article/details/116673446
#JS实现Base64编码
/**
* 1.0 FileReader
*/
// let img = document.querySelector("input");
// img.onchange = function(e){
// let file = this.files[0];
// imgToBase64(file,show);
// }
function imgToBase64(file,callback){
let f = new FileReader();
f.readAsDataURL(file);
f.onload = function(){
let base64 = f.result;
callback.call(this,base64)
}
}
function show(code) {
console.log('size:'+code);
document.querySelector('img').setAttribute('src',code);
}
/**
* 2.0 canvas重绘
* 可以压缩图片
*/
function imgToBase64(url,callback){
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function () {
console.log(url)
canvas.height = this.height; //指定画板的高度,自定义
canvas.width = this.width; //指定画板的宽度，自定义
ctx.drawImage(img, 0, 0,this.width,this.height); //参数可自定义
var dataURL = canvas.toDataURL("image/jpeg",1);
callback.call(this, dataURL); //回掉函数获取Base64编码
canvas = null;
};
}
/**
* Base64.js
*/
let code = $.base64.encode('223841');
console.log('base64编码后:'+code);
console.log('base64解码后:'+$.base64.decode(code));
//imgToBase64('https://pics0.baidu.com/feed/3b292df5e0fe992518448ccedf8964d58cb17194.jpeg?token=a8af55e099d7507f313330013f84d5dc',show)
可以使用 JavaScript 的 FileReader 类来将本地图片路径转换为 base64 编码。
首先，需要获取到图片的本地路径，可以使用 input 标签或者拖拽事件来获取。然后，创建一个 FileReader 对象，并使用 readAsDataURL 方法将图片转换为 base64 编码。最后，可以使用 onload 事件监听器来获取转换后的 base64 编码。
例如：
// HTML
<input type="file" id="fileInput" />
// JavaScript
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const base64 = reader.result;
console.log(base64);
};
请注意，上面的代码只能在本地环境中使用，因为在浏览器中无法直接访问本地文件系统。如果要在浏览器中实现这个功能，可以使用服务器端代码将本地文件转换为 base64 编码，然后再返回给浏览器。
原生js实现方式参考下面的代码：
var img = "imgurl";//imgurl 本地图片路径
function getBase64Image(img) {
var canvas = document.createElement("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();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
}
先file控件读取文件接着【FileReader读取】或【赋值个img的src上等图片加载完成后将其画到canvas画布上 然后canvas.toDataURL() 导出】 两个方式都可以