覆盖 HTML Canvas 上的另存为行为答案

【问题标题】：Override save as behavior on HTML Canvas覆盖 HTML Canvas 上的另存为行为
【发布时间】：2016-04-27 03:24:45
【问题描述】：

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

【问题讨论】：

`$('.canvas').on('contextmenu', function(e){ e.preventDefault(); });
谢谢，也许我应该更具体一些。我希望专门覆盖另存为选项而不是整个上下文菜单。为我的自定义图像交换默认画布 png 输出。
@philippjfr：在那种情况下，不，要么全部要么什么都没有，除了firefox简短
@philippjfr 我认为不，我们不能只更改一项...

标签： javascript html canvas

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

如果旁边有明显的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>

【讨论】：