Question

目前我正在尝试制作网络剪辑镀铬扩展程序。

我考虑了2个选项

使用html2canvas将所选元素的html渲染到canvas元素，然后使用canvas2image将其另存为图像文件。
第二个选项是获取所选元素的内部html及其样式，并以某种方式重现剪贴板上的元素。

对于这两种方法，我需要首先让用户通过拖动选择框或其他东西来图形化地选择元素。但我无法弄清楚如何做到这一点。有哪些可能的解决方案？

另外，我非常感谢上述两种方法的可行性。

谢谢：）

Answer 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路径

Answer 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视频上也经过了测试：）。

使用javascript选择要在网页中剪裁的元素

2 个答案: