0

目前我正在尝试制作一个网页剪辑 chrome 扩展。

我考虑了2个选项

  1. 使用html2canvas将选定元素的 html 渲染到 canvas 元素，然后可以选择使用canvas2image将其保存为图像文件。

  2. 第二个选项是获取所选元素的内部 html 及其样式，并以某种方式在剪贴板上重现该元素。

对于这两种方法，我首先需要让用户通过拖动选择框或其他东西以图形方式选择元素。但我真的不知道该怎么做。有哪些可能的解决方案？

顺便说一句，我真的很感激有关上述两种方法的可行性的一些意见。

谢谢 ：）

4

2 回答 2

2 
var selection = document.getSelection();
var range = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
var html = div.innerHTML;
return html;

这可以完成工作:)。也在普通文本、图像和 youtube 视频上进行了测试 :)。

于 2012-09-14T17:16:49.653 回答
1

根据我们在评论中的对话。我正在发布从用户选择中获取图像的解决方案

这是解析用户选择的内容后获取图像的步骤

正如您已经提到的，使用它来获取选定的 HTML

 $sel = document.commandDispatcher.focusedWindow.getSelection();

现在您拥有用户选择的完整 innerHTML 以及您必须序列化为字符串以处理它的标签和属性

var node = sel.getRangeAt(0).cloneContents();       
var htmlContent = new XMLSerializer().serializeToString(node);

稍后获取使用 javascript DOM 解析器来解析 htmlcontent

循环遍历每个元素并获取图像标签

像这样

 var parser = new DOMParser();
 var xmlDoc = parser.parseFromString(htmlContent, "text/xml");

你解析的 foreach 图像标签

 var image_src = xmlDoc.getElementsByTagName("img")[0].getAttribute("src");

现在变量image_src保存了用户选择的图片的实际完整src路径​</p>

于 2012-09-14T16:56:43.267 回答