Convert image url to blob in Javascript

Question

How do I convert a literal url for an image into a blob?

CODE

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");
};

Does this answer your question? [The easy way to convert an URL Image to Base64 or Blob in Javascript/Jquery](https://stackoverflow.com/questions/29606850/the-easy-way-to-convert-an-url-image-to-base64-or-blob-in-javascript-jquery) — Gokul Thiagarajan, Mar 04 '20 at 04:59

score 0 · Answer 1 · answered Mar 04 '20 at 21:54

Got it to work. For anyone encountering this problem heres a sample of the code:

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}/`);
});

Convert image url to blob in Javascript

1 Answers1