Fetching images with node - Error: read ECONNRESET at TLSWrap.onStreamRead

After reviewed your question, I did some R&D for the source URL which you have added the following is the possible solution to fetch images from the below URL.

Solution 1:

The below code is completely working fine, with the endless requests. I have reviewed the actual usda.gov site and review the headers and responses. I have used the Axios and verify that here the response received in-stream. I might not sure about canvas whether it will handle the stream response or not but, Axios works fine.

The reason to use Axios is that I have also tried with canvas somehow it failed to download an image. After studying the actual application and payload and tried with Axios which works fine and found most compatible.

const axios = require("axios");
const fs = require("fs");
const path = require("path");

/**
 * @description create image directory if not exists
 * @param {String} fPath
 * @returns
 */
async function createDirIfNotExists(fPath) {
  return new Promise((resolve, reject) => {
    if (fs.existsSync(fPath)) {
      console.error("Directory has already created");
      resolve();
    } else {
      fs.mkdirSync(fPath);
      resolve();
    }
  });
}

/**
 * @description download the image
 * @param {Object} requestBody
 * @returns
 */
async function downloadImage(requestBody) {
  const fPath = path.resolve(__dirname, "images");
  await createDirIfNotExists(fPath);
  const writer = fs.createWriteStream(`${fPath}/code.png`);
  const streamResponse = await axios(requestBody).catch((err) => {
    console.error(err);
  });
  streamResponse.data.pipe(writer);
  return new Promise((resolve, reject) => {
    writer.on("finish", resolve("success"));
    writer.on("error", reject("error"));
  });
}

const requestBody = {
  method: "get",
  url: "https://apps.fs.usda.gov/arcx/rest/services/RDW_Wildfire/ProbabilisticWildfireRisk/MapServer/export",
  headers: {},
  params: {
    bbox: "-13795354.864908611,6095394.383573096,-13785570.92528811,6085610.443952593",
    bboxSR: 102100,
    layers: "",
    layerDefs: "",
    size: "256,256",
    imageSR: 102100,
    historicMoment: "",
    format: "png",
    transparent: false,
    dpi: "",
    time: "",
    layerTimeOptions: "",
    dynamicLayers: "",
    gdbVersion: "",
    mapScale: "",
    rotation: "",
    datumTransformations: "",
    layerParameterValues: "",
    mapRangeValues: "",
    layerRangeValues: "",
    f: "image",
  },
  responseType: "stream",
};

(async () => {
  const response = await downloadImage(requestBody).catch(() => {
    console.error("Something went wrong while downloading file");
    return false;
  });
  if (response === "success") {
    console.info("File downloaded succesfully");
  }
})();

Hope my answer will help you to resolve your query. But if you still face the same issue let me know. This code is tested in the local machine as well as repl.it.

====================================================================

Solution 2:

After reviewing your updated description I have also updated my solution and put more efficient solutions in the answer as solution 2.

Solution 2 read the image streamed buffer and convert it into Uint8ClampedArray which might similar format which returns while use ctx.getImageData() function. I have also change responseType to arraybuffer

Hence, this solution resolves both problems listed in the question that you don't need to download the image as well as you received image data Uint8ClampedArray format.

const axios = require("axios");
const fs = require("fs");

/**
 * @description create image directory if not exists
 * @param {String} fPath
 * @returns
 */
async function createDirIfNotExists(fPath) {
  return new Promise((resolve, reject) => {
    if (fs.existsSync(fPath)) {
      console.error("Directory has already created");
      resolve();
    } else {
      fs.mkdirSync(fPath);
      resolve();
    }
  });
}

/**
 * @description get the image data directly from buffer.
 * @param {Object} requestBody
 * @returns
 */
async function getImageData(requestBody) {
  try {
    const { format } = requestBody.params;
    const arrFormat = {
      png: "image/png",
      jpg: "image/jpeg",
      jpeg: "image/jpeg",
      gif: "image/gif",
    };
    const streamResponse = await axios(requestBody).catch((err) => {
      console.error(err);
    });
    // store the streamed data
    const bufferData = streamResponse.data;
    // convert into in base64 format
    const base64Data = `data:${arrFormat[format]};base64,${Buffer.from(
      bufferData
    ).toString("base64")}`;
    // convert into in Uint8ClampedArray (as I referred from the code ctx.getImageData() return Uint8ClampedArray)
    const imageData = new Uint8ClampedArray(bufferData);
    return {
      base64Data,
      imageData,
    };
  } catch (err) {
    console.error(err);
  }
}

const requestBody = {
  method: "get",
  url: "https://apps.fs.usda.gov/arcx/rest/services/RDW_Wildfire/ProbabilisticWildfireRisk/MapServer/export",
  headers: {},
  params: {
    bbox: "-13795354.864908611,6095394.383573096,-13785570.92528811,6085610.443952593",
    bboxSR: 102100,
    layers: "",
    layerDefs: "",
    size: "256,256",
    imageSR: 102100,
    historicMoment: "",
    format: "png",
    transparent: false,
    dpi: "",
    time: "",
    layerTimeOptions: "",
    dynamicLayers: "",
    gdbVersion: "",
    mapScale: "",
    rotation: "",
    datumTransformations: "",
    layerParameterValues: "",
    mapRangeValues: "",
    layerRangeValues: "",
    f: "image",
  },
  // responseType: "stream",
  responseType: "arraybuffer",
};

(async () => {
  const response = await getImageData(requestBody).catch(() => {
    console.error("Something went wrong while downloading file");
    return false;
  });
  console.info("image data received", response);
})();

Hope this solution 2 might resolve your issue.

I suggest using queuing when you want to apply complex image manipulation or process. This might be an efficient way to use your memory and CPU.

Let me know still face an issue.StackOverflow

I open to update my answer if the StackOverflow community has an optimized or alternate solution.