覆盖 HTML 画布上的“另存为”行为

Override save as behavior on HTML Canvas

本文关键字：另存为 行为 HTML 覆盖      更新时间：2023-09-26

作为数据探索工具的一部分，我将PNG或SVG图像绘制到画布上。该部分工作正常，我知道一旦绘制到画布上，图像就不再是矢量格式。但是，我希望用户能够通过右键单击画布并使用标准的另存为上下文菜单来下载和保存原始 PNG 或 SVG 图像。有没有办法覆盖另存为右键单击菜单选项的默认行为？

有没有办法覆盖另存为的默认行为 右键菜单选项？（我希望专门覆盖 另存为选项而不是整个上下文菜单）

不幸的是，这是不可行的。例如，只要右键单击没有被处理程序捕获contextmenu浏览器就会弹出一个内部生成的菜单，我们没有读/写访问权限。

您始终可以使用 contextmenu 事件模拟菜单，但由于我们无法从内部生成的上下文菜单中读取实际内容，因此无法使其看起来相同（例如，由于各种插件内容、主题外观、版本更改等）。当然，这并不是说您无法完全替换菜单。

如果可能的话，我建议考虑将 SVG 作为图像直接插入 DOM 而不是画布。这样，浏览器将为您提供正确的上下文菜单（音频和视频等也是如此）。（可选）提供一个按钮/图标/链接，例如用于保存原始图像的角落。

IMO，最好的解决方案仍然是"保存"按钮。

如果旁边有一个嘶的保存，则没有多少用户会使用上下文菜单来保存图像。
对于那些使用上下文菜单的人来说，就像我们这里的大多数人一样，这个地方是一个安全的地方，只有我们的浏览器和我们知道我们在做什么，具有我们众所周知的功能。如果有一天，这些功能之一被某个网站覆盖（而不仅仅是像许多网站那样替换或阻止整个菜单），我会觉得被网站困住了。它还在我的计算机上修改了什么？这个安全的地方终于不是那么安全了吗？它知道我会潜伏什么吗？如果它对我的上下文菜单这样做，我可以信任浏览器的关闭按钮吗？

但是，如果您真的想这样做，解决方法是在画布上放置一个带有"原始"文件的透明<img>。

ori.onload = function() {
  var ctx = c.getContext('2d');
  // do some operation on the image
  ctx.arc(125,75,75,0,2*Math.PI)
  ctx.clip();
  ctx.drawImage(this, 0, 0, 250, 250);
};
#cont {
  position: relative;
}
#cont>img {
  position: absolute;
  opacity: 0;
  width: 250px;
  height: 250px;
  left: 0;
  top: 0;
}
Right click the image to save the original svg version
<div id="cont">
  <canvas id="c" width="250" height="250"></canvas>
  <img id="ori" src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Fiore_con_petali_arancioni_SVG.svg" />
</div>

相关文章：