node 根据图片img url 获取 base64

自己都觉得搞笑的是,之前写前端图片裁剪代码的时候,想解决的问题是如何将canvas裁剪的base64图片转化为file格式上传。而现在考虑的问题是,如何将网络中的图片转化为base64图片格式。
两种写法,思想一摸一样。一种是http库实现的,另外一种是superagent实现,我一般都使用superagent库。

  • http实现 主要来源自网络代码
const http = require('http');

const url = 'http://p0.meituan.net/tuanpic/3df525af5a3f7fe04077567d2a6caf794904.png';
http.get(url, function (res) {
  var chunks = []; //用于保存网络请求不断加载传输的缓冲数据
  var size = 0;   //保存缓冲数据的总长度
  res.on('data', function (chunk) {
    chunks.push(chunk);
    //累加缓冲数据的长度
    size += chunk.length;
  });
  res.on('end', function (err) {
    //Buffer.concat将chunks数组中的缓冲数据拼接起来,返回一个新的Buffer对象赋值给data
    var data = Buffer.concat(chunks, size);
    //可通过Buffer.isBuffer()方法判断变量是否为一个Buffer对象
    console.log(Buffer.isBuffer(data));
    //将Buffer对象转换为字符串并以base64编码格式显示
    const base64Img = data.toString('base64');
    //进入终端terminal,然后进入index.js所在的目录,
    return base64Img
  });
});
  • superagent实现 自己封装,使用了promise
 const img2Base64 = await new Promise(async function (resolve, reject) {
 const url = 'http://p0.meituan.net/tuanpic/3df525af5a3f7fe04077567d2a6caf794904.png';
 await superagent.get(url).buffer(true).parse((res) => {
   let buffer = [];
   res.on('data', (chunk) => {
     buffer.push(chunk);
   });
   res.on('end', () => {
     const data = Buffer.concat(buffer);
     const base64Img = data.toString('base64');
     resolve(base64Img)
   }
   );
 });
})

搞定了。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中,你可以使用`FileReader API`和`canvas`来将Base64编码的图片数据转换为真正的图片,并将其显示在页面上。这里是一个简单的示例: 首先,你需要安装一个叫做`vue-file-preview`的轻量级库,它可以帮助处理文件预览。你可以使用npm或yarn来安装: ```bash npm install vue-file-preview # 或者 yarn add vue-file-preview ``` 然后,在组件中引入并使用它: ```html <!-- 引入样式 --> <link rel="stylesheet" href="@/node_modules/vue-file-preview/dist/file-preview.css" /> <!-- 在template中使用 --> <template> <div> <file-preview ref="preview" :file="fileToPreview" /> </div> </template> <script> import { ref } from 'vue'; import FilePreview from 'vue-file-preview'; export default { components: { FilePreview }, setup() { const fileToPreview = ref(null); // 当Base64字符串可用时,调用这个方法转换并设置到组件 const convertBase64ToImage = async (base64Data) => { try { const blob = await atob(base64Data); const reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = async () => { const imgBlob = new Blob([reader.result.slice(reader.result.indexOf(',') + 1)], { type: 'image/jpeg' // 或者根据实际的图片类型调整 }); setFileToPreview(URL.createObjectURL(imgBlob)); // 设置到组件的引用中 }; } catch (error) { console.error('Error converting Base64 to image:', error); } }; return { fileToPreview, convertBase64ToImage // 如果你有一个Base64字符串,可以在这里调用它 }; } }; </script> ``` 在这个例子中,`fileToPreview`是一个Vue ref,用来存储图片URL。`convertBase64ToImage`函数接收一个Base64字符串,解码后转换为Blob对象,再创建一个URL对象来展示图片。 相关问题: 1. 为什么需要`FileReader API`? 2. `URL.createObjectURL`的作用是什么? 3. 如何处理Base64字符串失效的情况?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值