1

我正在创建一个简单的反应应用程序 (HTML)，它允许用户浏览到他们本地 PC 上的图像，然后将其显示在图像标签中。我想获取一个 data-url 并动态创建一个隐藏的画布标签（以不同的方法打开，但我想调整图像的大小，而不是在显示图像的标签上设置大小限制）。这是我的调整大小代码

MyComponent.res（违规代码）

let resize = dataUrl => {
    let canvas = React.createElement(_ => React.string("canvas"), {"style": "display: none;"})
    canvas.getContext("2d");
    dataUrl
}

错误

  We've found a bug for you!
  /Users/n0321437/projects/rescript-react/from-local-template/src/Upload.res:14:12-21

  12 │     let canvas = React.createElement(_ => React.string("canvas"), {"sty
     │ le": "display: none;"})
  13 │     //let myCanvas = canvas([React.null])
  14 │     canvas.getContext("2d");
  15 │     dataUrl
  16 │ }

找不到记录字段 getContext。

我没有找到太多关于使用 createElement 或 createElementVariadic 的文档或帖子——所以我在这里猜测。它看起来好像createElement返回一个类型的对象，element但没有关联的方法：

React.res

type element
external createElement: (component<'props>, 'props) => element = "createElement"

所以我想有几个问题

  1. 我是否实际上创建了一个代表 Canvas 的 HTML 对象的元素？
  2. 如果我这样做了，我该如何调用该代码上的方法？
  3. 如果我没有，如何创建隐藏的 Canvas 对象？
  4. 最后，一个人如何浏览文档和源代码以自己发现这一点？
4

1 回答 1

1

React 是一个提供声明式 API 的库，用于通过虚拟 DOM 创建、插入和更新 DOM。React.createElement是用于创建虚拟 DOM 元素的内部 API。

您似乎想要的是创建一个实际的 DOM 元素，然后不将其插入 DOM。React 的设计初衷不是为了做到这一点。

相反，您想要的是绑定到 DOM API，如果您只需要它的一些功能，您可以自己制作，或者您可以使用完整的 DOM 绑定集，例如rescript-webapi，它还方便地包括Canvas.

这是您创建canvas元素的方式：

open Webapi.Dom

let canvas = document->Document.createElement("canvas")

然后获取您将使用的画布上下文：

open Webapi.Canvas
let context = canvas->CanvasElement.getContext2d

然后使用函数Canvas2d来做你想做的事：

let image = context->Canvas2d.createImageDataCoords(~width=100, ~height=100)
...
context->Canvas2d.putImage(image, ~dx=0, ~dy=0)
于 2021-11-12T09:27:57.207 回答