使用从画布创建的图像

Posted

技术标签:

【中文标题】使用从画布创建的图像【英文标题】:Use images created from canvas 【发布时间】:2011-07-01 16:39:51 【问题描述】:

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

这是场景:

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

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

【问题讨论】:

【参考方案1】:

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

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

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

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

【讨论】:

@Marvzz 这个答案对您没有帮助吗?您对此问题还有其他问题吗? 你的回答很有道理,抱歉我刚刚回到模块。好的,因为我们要求必须保存生成的图像,所以我可能需要将数据 url 存储在数据库中,然后以您建议的方式检索。谢谢,如果我卡住了,我会回到这里。

以上是关于使用从画布创建的图像的主要内容,如果未能解决你的问题,请参考以下文章

动力学js将图像从dom拖放到画布中

从桌面到移动的画布图像不同大小(以像素为单位)

如何从画布前的变量中写入文本?

使用javascript在html画布中添加图像不起作用

Konva stage.toDataUrl()是不是渲染我在画布中看到的图像?

将 ImageData 对象(不是画布)转换为图像 dataURL