js base64 转 jpg
时间: 2023-11-30 12:38:18 浏览: 44
可以使用 JavaScript 中的 atob() 函数将 base64 编码的字符串转换为二进制数据,然后再将其转换为 Blob 对象,最后使用 URL.createObjectURL() 方法生成图片的 URL。以下是示例代码:
```javascript
// 假设 base64Str 是一个 base64 编码的字符串
const binaryStr = atob(base64Str);
const len = binaryStr.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
bytes[i] = binaryStr.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'image/jpeg' });
const imgUrl = URL.createObjectURL(blob);
```
相关问题
js base64png 怎么转换成base64jpg
将base64png转换为base64jpg需要经过以下几个步骤:
1. 将base64png转换为二进制数据;
2. 将二进制数据转换为图像对象;
3. 将图像对象转换为canvas对象;
4. 将canvas对象转换为base64jpg。
具体的实现可以参考以下代码:
```
// 将base64png转换为二进制数据
const base64ToBlob = function(base64) {
const bytes = window.atob(base64.split(','));
const array = new Uint8Array(bytes.length);
for (let i = 0; i < bytes.length; i++) {
array[i] = bytes.charCodeAt(i);
}
return new Blob([array], {type: 'image/png'});
};
// 将二进制数据转换为图像对象
const blobToImage = function(blob) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function() {
resolve(img);
};
img.onerror = function() {
reject();
};
img.src = URL.createObjectURL(blob);
});
};
// 将图像对象转换为canvas对象
const imageToCanvas = function(image) {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
return canvas;
};
// 将canvas对象转换为base64jpg
const canvasToBase64 = function(canvas) {
return canvas.toDataURL('image/jpeg', 1);
};
// 示例
const base64png = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFElEQVR4AWPw2v7Wfe0f+gYGBgYGBoYBQABJzAU4AAAAASUVORK5CYII=';
const blob = base64ToBlob(base64png);
blobToImage(blob)
.then(imageToCanvas)
.then(canvasToBase64)
.then(function(base64jpg) {
console.log(base64jpg);
});
```
base64转换成jpg图片
以下是将base64转换为jpg图片的示例代码:
```javascript
// 定义base64编码的图片字符串
var base64Img = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD...';
// 创建Image对象
var img = new Image();
// 设置Image对象的src属性为base64编码的图片字符串
img.src = base64Img;
// 创建Canvas对象
var canvas = document.createElement('canvas');
// 设置Canvas对象的宽高
canvas.width = img.width;
canvas.height = img.height;
// 获取Canvas对象的2D上下文
var ctx = canvas.getContext('2d');
// 在Canvas上绘制图片
ctx.drawImage(img, 0, 0);
// 将Canvas对象转换为DataURL
var dataURL = canvas.toDataURL('image/jpeg');
// 创建a标签
var a = document.createElement('a');
// 设置a标签的href属性为DataURL
a.href = dataURL;
// 设置a标签的download属性为文件名
a.download = 'image.jpg';
// 触发a标签的点击事件,下载图片
a.click();
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)