js 本地指定地址下的图片转base64,不使用Input,不受不同源限制
时间: 2024-02-26 17:52:38 浏览: 181
如果您知道要转换的图片的地址,您可以使用 `XMLHttpRequest` 对象来获取该图片并将其转换为 base64 格式。以下是一个示例代码:
```javascript
function getBase64FromUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
var reader = new FileReader();
reader.readAsDataURL(xhr.response);
reader.onload = function () {
callback(reader.result);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
};
xhr.send();
}
```
在这个函数中,我们首先使用 `XMLHttpRequest` 对象从指定的 URL 获取图片。我们将 `responseType` 设置为 `blob`,以便在 `onload` 事件中将响应转换为 `Blob` 对象。然后,我们使用 `FileReader` 对象将 `Blob` 对象转换为 Data URL,并在 `onload` 事件中调用回调函数将结果传递给它。最后,我们可以像这样使用它来转换图片:
```javascript
getBase64FromUrl('path/to/image.png', function (base64) {
console.log(base64);
});
```
这里我们调用 `getBase64FromUrl` 函数并传递要转换的图片的地址,然后在回调函数中处理转换后的 base64 字符串。注意,我们在代码中没有使用 `input` 元素,因此它不会受到不同源限制的影响。但是请注意,如果您的图片地址不在本地文件系统中,您可能会受到跨域访问限制。
阅读全文