使用从画布创建的图像

Question

我知道我可以使用 canvas.toDataURL() 从画布中保存图像。但是我怎样才能立即使用它呢？

这是场景：

我有一个带有可定制产品的购物车。通过更改属性，我可以使用画布创建自定义产品图像。添加到购物车后，我想立即使用生成的画布图像作为添加到购物车的产品的购物车缩略图。

我怎样才能做到这一点？有人可以帮我想出一个实现这一目标的编程工作流程吗？我正在使用 Drupal + Ubercart。

Answer 1

1. 创建一个新图像（通过new Image 在脚本中或通过document.createElement("img") 作为元素并将其附加到DOM）。如果您的购物车已经作为 <img> 元素，则获取对它的脚本引用。

2. （可选）将图像的onload属性设置为函数，如果您需要在准备好后以编程方式使用它。

3. 将图片的src设置为你的数据URL。

有关需要在src 之前设置onload 的更多信息，请参阅
Should setting an image src to data URL be available immediately?