在移动设备 canvas 上触发上下文菜单

Question

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

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

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

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,
}))

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

Answer 1

据我所知，移动版 safari 没有任何 canvas 的上下文菜单。据我所知，“另存为”不是标准，因此它可能不适用于所有浏览器。

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

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

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

在移动设备 canvas 上触发上下文菜单

Trigger context menu on a canvas on mobile

html

javascript

reactjs

konvajs