Can a React app return an image string that can be read into the SRC attribute of a tag?

Question

Is it possible to reference a React App that is running on another server using <img src="https://www.react_app.com">

The idea is that the React App returns an image string (or similar) like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA ... So that it can be read in a <img src=""> tag? The main question is what React code simply sends back a request with the string so that it can be read in src=""?

Also is there a timeout for how long an <img src=""> attempts to fetch an image?

React component imports

import React, { useCallback, useEffect, useState, useRef } from 'react'
import classNames from 'classnames'
import { fabric } from 'fabric'
import fabricConfig from './fabricConfig'
import FileUploader from './components/FileUploader'
import ColorPicker from './components/ColorPicker'
import Checkbox from './components/Checkbox'
import Button from './components/Button'
import getRatio from './utils/getRatio'
import getInitialCanvasSize from './utils/getInitialCanvasSize'
import getImageFromURL from './utils/getImageFromURL'
import resizeCanvas from './utils/resizeCanvas'
import removeSelectedElements from './utils/removeSelectedElements'
import getCanvasObjectFilterRGB from './utils/getCanvasObjectFilterRGB'
import setAttributes from './utils/setAttributes'
import { Z, Y, DELETE } from './utils/constants'

Fetch image from URL and automatically make changes to it on load

const imageUrl = "www.something.com/image"

if (imageUrl) {
      new Promise(resolve => fabric.loadSVGFromURL(imageUrl, (objects, options) => {
        const group = new fabric.Group(objects)
        resolve(getRatio(group, canvas))
      }))
      .then(({ ratio, width, height }) => {
        fabric.loadSVGFromURL(imageUrl, (objects, options) => {
          try {
            objects.forEach(obj => {
              setAttributes(obj, {
                left: (obj.left * ratio) + ((canvas.width / 2) - ((width * ratio) / 2)),
                top: (obj.top * ratio) + ((canvas.height / 2) - ((height * ratio) / 2)),
              })
              obj.scale(ratio)
              // MAKE EDITS TO THE SVG OBJECT HERE
              canvas.add(obj)
            })
            canvas.renderAll()

            // HERE I AM TRYING TO SAVE THE CANVAS STATE AND SEND IT BACK TO THE THIRD PARTY WEBSITE USING GET PARAMETERS
            var canvasImg = ''
            if(urlParams.get("export") === "png"){
              canvasImg = canvas.toDataURL("image/png")
            } else if (urlParams.get("export") === "pdf") {
              canvasImg = canvas.toDataURL("image/pdf")
            } else {
              onCanvasModified(canvas)
            }
          } catch(err) {
            console.log('Could not retrieve that image')
          }
        })
      })

Answer 1

What you want is a CDN, which serves image assets via a GET request (the img src accepts a string which it uses to fetch (GET) content). In short, a CDN serves the application with assets -- be it images, javascript, CSS or HTML. A React application is designed to update content in place via manipulating a virtual DOM; therefore, expecting it to serve assets across domains is anti-pattern. Instead, you would use a custom server (like express) or a web server (like nginx) to serve static assets.

As a simple example, imgur.com would the React application, while i.imgur.com would be their CDN to serve images like this and s.imgur.com would be their CDN to serve CSS/JS assets like this.

This answer goes into more detail how to do it; HOWEVER, this is only one of many, many ways on how accomplish the above, but the concept is still the same: Making a request to retrieve an image via an img src string.

I hesitate to provide full example code since I have no idea what stack you're working with and what your knowledge/comfort-level is regarding backend services. As such, if you want practice consuming a request that serves images on the frontend, then I'd recommend you start with this API service.

---

Example

Here's one of many ways to do it: Example Repo

To run the example...

1.) Clone the repo: git clone git@github.com:mattcarlotta/save-canvas-example.git

2.) Install dependencies: yarn or npm i

3.) Run yarn dev or npm dev

4.) Click one of the buttons to either save an image as PNG or as a PDF

The example includes quite a bit of notes, but to provide a brief:

• User clicks button. File Ref
• Depending on the clicked button, the canvas is converted to a Blob, which is then converted to a File. File Ref
• This file is then sent (via POST) to an image microservice running at http://localhost:4000 listening for requests to /upload-file. File Ref
• The microservice sees the request and directs to our middleware functions. File Ref
• Then it directs it to the /upload-file controller. File Ref
• The controller determines if the file upload was valid (in the middleware), if not it throws an error. File Ref
• When valid, the file details are generated from req.file (this comes from our multer middleware function), a directory is created and a file is saved to that directory. File Ref
• A filepath is then sent back to the client. File Ref
• Client receives filepath from image microservice and sets it to state. File Ref
• Client then renders a shareable link, a link to view the file, and a preview. File Ref

Results

Save PNG:

Save PDF:

---

Flow Diagram

Answer 2

I've tried to reproduce the project with minimal features. user can add and interact with rectangle and save the image. upon saving it would go to the server and the image data will be stored in a JSON file.

Here's the link to frontend: https://codesandbox.io/s/so-fabric-client-5bjsf

As you have mentioned, there are two different react apps; I've created two routes, /draw where the user can draw the image and /images where I fetch the images. you can consider these two routes as different react projects since the logic remains the same regardless of their origin.

On the backend side, for demonstration purposes and simplicity, I've used a JSON file and sending all the file content in response when the application wants to display the images. It could become problematic once there are hundreds of images or when you want to search them by the user. so consider using a database or any other method.

here's the backend code:

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

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname + "/build")));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post("/save-image", (req, res) => {
    const image = req.body.image
    
    fs.readFile('images.json', function (err, data) {
        if(err) {
            console.log(err)
            res.status(500)
        }
        
        var json = JSON.parse(data)
        json.push({id: json.length, image})
    
        fs.writeFile("images.json", JSON.stringify(json), (err, result) => {
            if(err) console.log(err);
        })
    })

    res.status(200);
})

app.get("/get-images", (req, res) => {
    res.json(JSON.parse(fs.readFileSync("./images.json")))
})

app.listen(PORT, () => {
    console.log(`up and running on port ${PORT}`);
})

images.json is just a file with [] as its content. the code is pretty much self-explainatory, I've uploaded all the code on GitHub as well -- so-fabric-demo and you can check the demo on Heroku