Rescript-react：创建隐藏的画布元素

Posted 2023-03-11

【中文标题】Rescript-react：创建隐藏的画布元素

【英文标题】：Rescript-react: Creating a hidden canvas element

【发布时间】：2021-12-24 08:03:15

【问题描述】：

我正在创建一个简单的 React 应用程序 (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"

所以我想有几个问题

我是否真的创建了一个元素来表示 Canvas 的 HTML 对象？ 如果我这样做了，如何调用该代码上的方法？ 如果没有，如何创建隐藏的 Canvas 对象？ 最后，如何浏览文档和源代码以自行发现这一点？

【参考方案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)

【讨论】：

啊-谢谢。午饭后会试一试。

这本质上是“有效的”（我无法让我的图像正确调整大小，但这就是我的问题）。 Bs-WebAapi 的东西很不错，但是考虑到我正在使用的东西的范围很小，我不喜欢它添加到构建过程中的时间量。我已经移植了我正在使用的几个互操作，并采用了我的偏好。学习互操作位真是太好了。我接受了这一点——但一旦我的解决方案发挥作用，我也会发布我的解决方案，因此有一个替代解决方案可以利用 webapi。谢谢