js 图片转base64
时间: 2023-07-06 19:21:36 浏览: 54
以下是将图片转换为Base64的JavaScript代码示例:
```javascript
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);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
// 使用方法
var img = new Image();
img.onload = function() {
var base64 = getBase64Image(img);
console.log(base64);
};
img.src = "yourImage.jpg";
```
在这个示例中,我们创建了一个名为 `getBase64Image` 的函数,它接受一个 `img` 对象作为输入参数并返回Base64字符串。该函数使用 `canvas` 元素将图像绘制到画布上,然后使用 `toDataURL()` 方法将画布转换为Base64字符串。最后,我们删除前缀并返回Base64字符串。
相关问题
js图片转base64
可以使用HTML5的canvas元素来实现图片转base64,具体实现如下:
```
// 将图片转为base64格式
function imageToBase64(img) {
// 创建canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas的宽高和图片一致
canvas.width = img.width;
canvas.height = img.height;
// 将图片绘制到canvas上
ctx.drawImage(img, 0, 0);
// 将canvas转换为base64格式的图片数据
const dataURL = canvas.toDataURL('image/png');
return dataURL;
}
// 使用示例
const img = new Image();
img.src = 'example.png';
img.onload = function() {
const base64 = imageToBase64(img);
console.log(base64);
}
```
其中,`img`为需要转换的图片对象,`base64`即为转换后的base64字符串。
Js 图片转base64
好的,以下是在 JavaScript 中将图片转换为 base64 编码的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Image to Base64 Example</title>
</head>
<body>
<input type="file" id="image-selector" onchange="convertImageToBase64()" />
<br>
<img id="image-preview" />
<br>
<textarea id="image-base64"></textarea>
<script>
function convertImageToBase64() {
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById("image-preview").src = event.target.result;
document.getElementById("image-base64").value = event.target.result;
};
reader.readAsDataURL(document.getElementById("image-selector").files[0]);
}
</script>
</body>
</html>
```
这里使用了 HTML5 的 FileReader API,通过选择文件的方式将图片读取到浏览器内存中,并将图片预览以及 base64 编码后的字符串显示在页面上。
当用户选择文件时,`convertImageToBase64()`函数会自动触发,该函数首先创建一个读取器(reader),然后设置其`onload`事件处理程序。在事件处理程序中,将读取到的图片文件显示在页面上,并将其转换为 base64 编码的字符串,保存在一个文本框中。
你可以将上述示例代码复制到一个 HTML 文件中,然后在浏览器中打开它,即可看到效果。