是否可以使用在另一台服务器上运行的 React App 引用 <img src="https://www.react_app.com">

这个想法是 React 应用程序返回一个图像字符串（或类似的），如下所示： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA ... 以便可以在<img src="">标签中读取它？主要问题是什么 React 代码只是简单地发送一个带有字符串的请求以便可以读取它src=""？

<img src="">尝试获取图像的时间是否超时？

React 组件导入

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'

从 URL 获取图像并在加载时自动对其进行更改

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')
          }
        })
      })

解决方案

你想要的是一个CDN，它通过GET请求提供图像资产（imgsrc接受一个字符串，它用于获取 ( GET) 内容）。简而言之，CDN 为应用程序提供资产——无论是图像、javascript、CSS 还是 HTML。React 应用程序旨在通过操作虚拟 DOM 来更新内容；因此，期望它跨域服务资产是反模式的。相反，您将使用自定义服务器（如express）或 Web 服务器（如nginx）来提供静态资产。

举个简单的例子，imgur.com将是 React 应用程序，而i.imgur.com他们的 CDN 将提供这样的图像，并将作为他们的 CDN 提供这样s.imgur.com的 CSS/JS 资产。

这个答案更详细地介绍了如何做到这一点；然而，这只是实现上述方法的众多方法之一，但概念仍然相同：发出请求以通过 imgsrc字符串检索图像。

我不愿提供完整的示例代码，因为我不知道您正在使用什么堆栈以及您在后端服务方面的知识/舒适程度如何。因此，如果您想练习使用在前端提供图像的请求，那么我建议您从这个API 服务开始。

例子

这是执行此操作的多种方法之一：示例回购

要运行示例...

1.）克隆回购：git clone git@github.com:mattcarlotta/save-canvas-example.git

2.）安装依赖项：yarn或npm i

3.) 运行yarn dev或npm dev

4.) 单击其中一个按钮将图像另存为 PNG 或 PDF

该示例包含相当多的注释，但提供简要说明：

• 用户点击按钮。文件参考
• 根据单击的按钮，画布转换为 a Blob，然后转换为 a File。文件参考
• 然后将此文件发送（通过POST）到一个图像微服务，该服务在http://localhost:4000侦听对/upload-file. 文件参考
• 微服务看到请求并定向到我们的中间件功能。文件参考
• 然后它将它引导到/upload-file控制器。文件参考
• 控制器确定文件上传是否有效（在中间件中），如果不是则抛出错误。文件参考
• 当有效时，文件详细信息从req.file（这来自我们的multer中间件函数）生成，创建一个目录并将一个文件保存到该目录。文件参考
• 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