【问题标题】:save Metadata with image, that is retrieved from html5 canvas保存带有图像的元数据,从 html5 画布中检索
【发布时间】:2019-02-28 21:32:25
【问题描述】:

我想要做的是在使用canvas.toDataUrl('image/jpeg') 保存图像之后保存图像元数据以及图像数据,以便下次加载图像时,我应该可以访问该元数据。

考虑下面的图像,这里我在画布上绘制对象,鼠标悬停在它上面会显示带有一些数据的工具提示。我正在尝试找出一种方法,通过该方法可以将元数据与图像一起保存,当再次加载图像时,工具提示应该与之前一样工作。

在搜索解决方案时,我发现EXIF 用于将元数据保存到图像,但没有找到直接的解决方案,大多数解决方案都使用exiftool 或任何其他第三方工具/库。

【问题讨论】:

  • 您的图像一旦绘制在画布上,就不再是您的图像了。所以 EXIF 和所有元数据都消失是正常的。例如,相机名称不再相关,创建日期等也不再相关。因此,确实,如果您想自己包含一些 EXIF 数据,则必须自己添加。那里有库可以做到这一点。虽然没有内置的方式。因此,如果您想这样做,请使用其中一个库,或者学习做他们所做的事情(向他们学习可能会更快)。
  • @Kaiido 所以对于 EXIF,没有第三方工具就无法直接执行此操作,是否有任何其他技术可以将元数据添加到图像中,以便在图像上进行标记当用户想要查看时显示相关数据。

标签: javascript jquery html canvas html5-canvas


【解决方案1】:

要将元数据保存到图像中,发现没有来自前端的选项,必须从后端进行(我使用的是 node.js)。为此我不得不使用node-exiftool,需要安装exiftool

以下是将元数据添加到图像的步骤:

  1. 上传图片并将元数据发送到服务器。
  2. 使用node-exiftool's.writeMetadata()方法将元数据写入图像。

这是为写作部分做的。

类似地,我们可以使用node-exiftool's .readMetadata() 方法来阅读。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-22
    • 1970-01-01
    • 2013-11-23
    • 1970-01-01
    • 1970-01-01
    • 2015-01-10
    相关资源
    最近更新 更多