Javascript 为Google Chrome创建拖放选择屏幕捕获

我到处找这个。我甚至尝试过查看其他扩展，看看它是如何实现的。最简单的方法是什么来创建一个扩展插件，使我能够拖动

单击扩展图标->拖动/选择内容区域->捕获为屏幕截图/png，让我传递给API

我已经关闭了我的基本插件，它可以捕获图像和屏幕截图，但我想创建这个功能，在这里我可以拖动并选择一个内容区域。我以前从来没有创建过这样的东西，我也不知道如何用Javascript实现它

编辑：我不想为我做这件事，我只想知道怎么做。我从未听说过Javascript会这样做，但我知道这个功能是存在的，因为其他扩展也会这样做

编辑2：我发现唯一接近我想要的东西是“html2canvas”，但我不确定如何将其转化为拖放/选择元素

---

干杯

如果您已经拥有捕获屏幕截图的部件，则只需将其裁剪到正确的大小，对吗

该大小只是一组用于拖动的开始和结束坐标。我们可以使用jQuery和一个元素制作一个简单的脚本来跟踪这个过程，并向用户提供反馈。这里的基本原则是：

收听JS事件（

mousedown

，

mousemove

，

mouseup

），以便了解用户在做什么

将绝对定位的

添加到屏幕以供选择

以下是概念证明：

以下是重要的JS：

// Things we need to keep track of
var start = {};
var end = {};
var isSelecting = false;

$(window)
    // Listen for selection
    .on('mousedown', function($event) {
        // Update our state
        isSelecting = true;
        $('#selection').removeClass('complete');
        start.x = $event.pageX;
        start.y = $event.pageY;

        // Add selection to screen
        $('#selection').css({
            left: start.x,
            top: start.y
        });
    })
    // Listen for movement
    .on('mousemove', function($event) {
        // Ignore if we're not selecing
        if (!isSelecting) { return; }

        // Update our state
        end.x = $event.pageX;
        end.y = $event.pageY;

        // Move & resize selection to reflect mouse position
        $('#selection').css({
            left: start.x < end.x ? start.x : end.x,
            top: start.y < end.y ? start.y : end.y,
            width: Math.abs(start.x - end.x),
            height: Math.abs(start.y - end.y)
        });
    })
    // listen for end
    .on('mouseup', function($event) {
        // Update our state
        isSelecting = false;
        $('#selection').addClass('complete');
    });

//我们需要跟踪的事情
var start={}；
var end={}；
var isSelecting=假；
$（窗口）
//倾听选择
.on（'mousedown'，函数（$event）{
//更新我们的状态
isSelecting=true；
$（“#选择”）.removeClass（'complete'）；
start.x=$event.pageX；
start.y=$event.pageY；
//将选择添加到屏幕
$（“#选择”）.css({
左：start.x，
顶部：开始
});
})
//倾听动静
.on（'mousemove'，函数（$event）{
//如果我们没有选择，请忽略
如果（！isSelecting）{return；}
//更新我们的状态
end.x=$event.pageX；
end.y=$event.pageY；
//移动选择并调整大小以反映鼠标位置
$（“#选择”）.css({
左：start.x

---

您可以使用

mouseup

回调来启动屏幕覆盖和裁剪

您不只是在堆栈溢出上创建一个帐户来请求人们为您做一些事情。首先看一看。@MarcoBonelli我不是要求为我做这件事，我是要求一些帮助。在问问题之前，我应该如何处理StackOverflow？关于你的问题，在这个网站上几乎完全脱离主题。首先，因为你说“我不知道怎么做”，这并不鼓励人们回答你的问题，因为你没有表现出任何努力；其次，因为你的问题似乎没有明确的问题陈述。一个好的问题，相反，是一个关于某个特定主题的请求帮助的问题，在这个问题上，你表明你已经创造了一些东西，并且你愿意改进或者可能让它正常工作。@MarcoBonelli，但这正是问题所在……我没有什么可展示的，因为我通过研究没有发现任何东西。这就是我来这里的原因。这是一个特定的主题，这就是为什么我标记为“谷歌浏览器扩展”。我不知道这个网站是为那些“对如何做事情有基本想法的人而建的，而且仅仅是这样”。听说有人给我指出了正确的方向，所以我可以把我的“我不知道怎么做”变成“谢谢！我自己找不到这个”。我可以把我的密码贴上去吗？完全不相关，因为它与我的要求完全不同。你是说你已经下载了“基本插件，它可以捕获图像和屏幕截图”。所以展示它将是一个好主意。这可能是一段很长的代码，因此您可能需要从中删除重要部分并发布它们。有了这些代码，您可以寻求帮助，了解如何改进它，以使用户选择所需的屏幕截图区域。第二，不清楚“拖放”是什么意思，你能举一些例子吗，比如你尝试过的现有扩展？那会很有帮助的。这太完美了。我现在可以使用它来触发我的“捕获”函数，它将捕获该选择中的任何内容。非常感谢你！很高兴它有帮助！如果答案充分回答了您的问题，请单击复选标记接受答案。