在 Javascript 中将图像 url 转换为 blob

Posted 2023-03-22

【中文标题】在 Javascript 中将图像 url 转换为 blob

【英文标题】：Convert image url to blob in Javascript

【发布时间】：2020-06-16 13:07:43

【问题描述】：

如何将图片的文字 url 转换为 blob？

代码

emoji.url = "https://e.mirror-ai.net/mj/en/PcW59GJ5T2SpEtPEFRADWA/yB4/154725046.png"

const imageUrlToBlob = url => 
  
;

const zipAndSave = async emojis => 
  const zip = new JSZip();
  for (var emoji of emojis) 
    let emojiFile = imageUrlToBlob(emoji.url);
    zip.file(emoji.name, emojiFile);
  
  const zipped = await zip.generateAsync( type: "blob" );
  saveAs(zipped, "emojis.zip");
;

【问题讨论】：

这能回答你的问题吗？ The easy way to convert an URL Image to Base64 or Blob in javascript/Jquery

【参考方案1】：

让它工作。对于遇到此问题的任何人，这里有一个代码示例：

zipAndSaveEmojis.js

import axios from "axios";
import JSZip from "jszip";
import  saveAs  from "file-saver";

const b64toBlob = (b64Data, contentType = "", sliceSize = 512) => 
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) 
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) 
      byteNumbers[i] = slice.charCodeAt(i);
    
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  
  const blob = new Blob(byteArrays,  type: contentType );
  return blob;
;

const zipAndSaveEmojis = async emojis => 
  const zip = new JSZip();
  let downloadedEmojis;
  try 
    const res = await axios(
      method: "post",
      url: "http://localhost:5000/getEmojis",
      data:  emojis 
    );
    downloadedEmojis = res.data.map(emoji => 
      return 
        data: b64toBlob(emoji.base64),
        name: emoji.name
      ;
    );
   catch (err) 
    console.error(err);
  
  downloadedEmojis.map(emoji => zip.file(emoji.name, emoji.data));
  const zipped = await zip.generateAsync( type: "blob" );
  saveAs(zipped, "emojis.zip");
;

export  zipAndSaveEmojis ;

server.js

// import express (after npm install express)
const express = require("express");
const cors = require("cors");
const axios = require("axios");

// create new express app and save it as "app"
const app = express();

app.use(express.json( extended: true ));
app.use(cors( origin: "http://localhost:3000" ));

// server configuration
const PORT = 5000;

// create a route for the app
app.post("/getEmojis", async (req, res) => 
  let emojis = [];
  for (var emoji of req.body.emojis) 
    const res = await axios(emoji.url, 
      responseType: "arraybuffer"
    );
    emojis.push(
      base64: Buffer.from(res.data, "binary").toString("base64"),
      name: emoji.name
    );
  
  return res.send(emojis);
);

// make the server listen to requests
app.listen(PORT, () => 
  console.log(`Server running at: http://localhost:$PORT/`);
);