probe-image-size VS image-type

probe-image-size

• Issues With Using 'http.get()' Which Resulted In 'BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.' Error
  1 project | /r/react | 11 Aug 2022

  import React, { useState } from "react"; const url = require("url"); const http = require("http"); const sizeOf = require("image-size"); function Upload() { const [photoName, setPhotoName] = useState(""); const [photoLink, setPhotoLink] = useState(""); const [submittedData, setSubmittedData] = useState([]); const [errors, setErrors] = useState([]); function handlePhotoNameChange(event) { console.log("handlePhotoNameChange"); setPhotoName(event.target.value); } function handlePhotoLinkChange(event) { console.log("handlePhotoLinkChange"); setPhotoLink(event.target.value); } function handleSubmit(event) { event.preventDefault(); if (photoName.length > 0) { // TODO: // Use 'probe-image-size' library to determine width and height of the image the user passed in // Then, add a 'width' and 'height' key value to the 'formData' variable so that the // values are then added back to 'db.json' accordingly: // https://github.com/nodeca/probe-image-size const options = url.parse(photoLink); // 'http.get()' request so that I can obtain the image itself: http.get(options, function (response) { const chunks = []; response .on("data", function (chunk) { chunks.push(chunk); }) .on("end", function () { const buffer = Buffer.concat(chunks); console.log(sizeOf(buffer)); }); }); const formData = { photoName: photoName, photoLink: photoLink }; const dataArray = [...submittedData, formData]; setSubmittedData(dataArray); setPhotoName(""); setPhotoLink(""); setErrors([]); console.log("handleSubmit() called"); console.log("dataArray (before fetch() call): ", dataArray); fetch("http://localhost:3000/photos", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ dataArray: dataArray, }), }) .then((response) => response.json()) .then((response) => { console.log("response (from fetch request): ", response); }); } else { setErrors(["Name of photo is required!"]); } } const listOfSubmissions = submittedData.map((data, index) => { return ( {data.photoName} {data.photoLink} ); }); return ( Upload Image To Board Name: Link: Upload {errors.length > 0 ? errors.map((error, index) => ( {error} )) : null} Recent Submissions Below: {listOfSubmissions} ); } export default Upload;

• Lazy loading images, so easy you won’t believe it (a native strategy)
  4 projects | dev.to | 9 Jun 2022

  Again, there are multiple ways to get dimensions and your development pipeline might just provide this information by default. In case it doesn't, we have found a nice and small npm package called probe-image-size. It allows for 'probing' an image locally or remotely.

image-type

We haven't tracked posts mentioning image-type yet.
Tracking mentions began in Dec 2020.