如何将firefox浏览器中的选定文本写入图像

How to write selected text from firefox browser as a image

本文关键字：文本 图像 firefox 浏览器      更新时间：2023-09-26

我面临的问题是：假设我们在浏览器窗口中选择一些文本。然后，当鼠标向上移动时，我需要将选定的文本保存为客户端系统上的图像。

我可以通过将选定的文本写入本地系统上的文本文件JavaScript和XUL。但现在我必须把它保存为图像？

有人有任何JavaScript代码或建议吗？

我已经通过使用XUL的firefox扩展实现了这一点。。剩下的唯一问题是将文本保存为图像。

您可以使用<canvas>标记来完成此操作。它是一个HTML标记，但您也可以在XUL中使用它——只需记住指定HTML名称空间。如果你在XUL文档中指定了这个标签，你会这样做：

<canvas xmlns="http://www.w3.org/1999/xhtml" width="..." height="..."/>

或者，如果你动态创建它：

var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

然后可以将文本绘制到画布中。您可以使用canvas.toDataURL()将画布内容转换为图像（将该图像保存到文件的代码片段）。

您可以这样做：

function getSelectedText()
{
    var t = '';
    if(window.getSelection)
        t = window.getSelection();
    else if(document.getSelection)
        t = document.getSelection();
    else if(document.selection)
        t = document.selection.createRange().text;
    return t;
}
$('.mySelectableItems').on('onmouseup', function(e)
{
    var text = getSelectedText();
    if(!text) return false;//stopping propagation!!
    var svg = $('<svg width="300" height="300"><text x="85" y="124">'+text+'</text></svg>');
});

之后将svg放到web中，并在img源代码中放入svg-url。

Via：这里，这里还有这里。

相关文章：