在移动设备上的画布上触发上下文菜单答案

【问题标题】：Trigger context menu on a canvas on mobile在移动设备上的画布上触发上下文菜单
【发布时间】：2020-10-01 16:13:37
【问题描述】：

我正在画布上呈现内容，我希望能够使用浏览器的本机“另存为”上下文菜单选项进行保存。

这在桌面上运行良好（您可以转到 here 并右键单击绿色矩形），但在移动设备上不适用（相同示例）。

我尝试使用（使用 Konva 和 react）手动触发附加到画布的上下文菜单事件

stageRef.current?.dispatchEvent(new MouseEvent('contextmenu', {
  bubbles: true,
  cancelable: false,
  view: window,
  button: 2,
  buttons: 0,
  clientX: stageRef.current?.getClientRect().x,
  clientY: stageRef.current?.getClientRect().y,
}))

知道如何启用此行为吗？我找不到任何来源说明为什么它不会在移动设备上发生。

【问题讨论】：

标签： javascript html reactjs konvajs

【解决方案1】：

正如我所见，移动 Safari 没有针对任何画布的此类上下文菜单。而且我知道“另存为”不是标准，因此它可能不适用于所有浏览器。

作为解决方案，您可以使用导出选项制作自己的上下文菜单实现。

https://konvajs.org/docs/data_and_serialization/Stage_Data_URL.html#page-title

https://konvajs.org/docs/sandbox/Canvas_Context_Menu.html#page-title

【讨论】：

感谢您的回答！我试图绕过 Safari 关于直接下载和共享的限制，但我想这是不可能的。