js图片路径转base64
时间: 2023-11-15 19:56:59 浏览: 38
可以使用canvas将图片转换为base64格式。具体实现步骤如下:
1. 创建一个Image对象,并将图片路径赋值给它。
2. 等待图片加载完成,然后将图片绘制到canvas上。
3. 使用canvas的toDataURL方法将canvas转换为base64格式的图片数据。
以下是示例代码:
```javascript
function imgToBase64(url, callback) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL();
callback(dataURL);
canvas = null;
};
img.src = url;
}
// 使用示例
imgToBase64('http://example.com/image.jpg', function(base64) {
console.log(base64);
});
```
相关问题
js图片绝对路径转base64
可以使用canvas将图片转换为base64。具体步骤如下:
1. 创建一个Image对象,设置其src为图片的绝对路径。
2. 在Image对象的onload事件中,创建一个canvas对象,将图片绘制到canvas上。
3. 使用canvas的toDataURL方法将canvas转换为base64字符串。
以下是示例代码:
```javascript
function convertImgToBase64(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
// 调用示例
convertImgToBase64('http://example.com/image.jpg', function(base64Img){
console.log(base64Img);
});
```
vue 图片路径转base64
在Vue中,可以使用HTML5的FileReader对象将图片路径转换为Base64编码。以下是一个示例代码:
```javascript
// 在Vue组件中的方法
methods: {
handleFileInputChange(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
this.imageData = e.target.result;
};
reader.readAsDataURL(file);
}
}
```
在上面的代码中,我们定义了一个`handleFileInputChange`方法,该方法会在文件输入框的值发生变化时触发。在方法内部,我们首先获取到用户选择的文件对象,然后创建一个FileReader对象。接下来,我们为FileReader对象的`onload`事件绑定了一个回调函数,该函数会在文件读取完成后被调用。在回调函数中,我们可以通过`e.target.result`获取到文件的Base64编码数据,并将其赋值给Vue组件的`imageData`属性。
请注意,上述代码中的`imageData`是一个Vue组件的数据属性,你需要在Vue组件中定义它。
希望以上代码对你有所帮助!