覆盖HTML画布上的另存为行为 [英] Override save as behavior on HTML Canvas

问题描述

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

As part of a data exploration tool I'm variously drawing PNG or SVG images to a canvas. That part works fine and I understand that once drawn to canvas the image is no longer in vector format. However I'd like the user to be able to download and save the original PNG or SVG image by right-clicking on the canvas and using the standard save-as context menu. Is there any way to override the default behavior of the save-as right-click menu option?

推荐答案

是否有任何方法可以覆盖另存为
的右键菜单选项的默认行为？ （我希望专门覆盖
另存为选项，而不是整个上下文菜单）

Is there any way to override the default behavior of the save-as right-click menu option? (I was hoping to specifically override the save-as option not the entire context menu)

遗憾的是，这是不可能的。只要例如 contextmenu 处理程序未捕获右键单击，浏览器就会弹出一个内部生成的菜单，我们没有

This is (un)fortunately not doable. As long as the right-click isn't captured by a for example contextmenu handler the browser will pop up an internally generated menu that we have no read/write access to.

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

You could always emulate a menu using the contextmenu event but since we can't read the actual content from the internally generated context menu it would impossible to get it to look identical (e.g. due to various plugin content, theme look, version changes etc.). That is of course not to say you couldn't make a replacement menu entirely.

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

I would suggest considering, if possible, that you simply insert the SVG as an image directly into the DOM instead of the canvas. This way you will be given the correct context menu by the browser (same goes for audio and video etc.). Optionally provide a button/icon/link in, for example the corner to save out the original image.

这篇关于覆盖HTML画布上的另存为行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！