Question

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

Answer 1

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

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

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

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

Answer 2

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

如果图像旁边有一个blattant save ，则没有多少用户会使用上下文菜单来保存图像。
对于那些使用上下文菜单的人，就像我们这里的大多数人一样，这个地方是一个安全的地方，只有我们的浏览器和我们知道我们正在做什么，我们众所周知的功能。如果有一天，其中一个功能被一些网站覆盖（而不仅仅是在很多网站上更换或阻止整个菜单），我会感到被网站困住了。在我的电脑上还修改了什么？这个安全的地方最终不是那么安全吗？它知道我潜藏的是什么吗？如果它在我的上下文菜单中执行此操作，我可以信任浏览器的关闭按钮吗？

但是如果你真的想这样做，解决方法就是在你的画布上放置一个透明的<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>

在HTML Canvas上覆盖另存为行为

2 个答案: