为 Google Chrome 创建拖动 select 屏幕截图

Question

这个我到处找。我什至尝试查看其他扩展以了解它是如何完成的。为我的扩展创建一个使我能够拖动的附加项的最简单方法是什么；

单击扩展图标 -> Drag/select 内容区域 -> 捕获为 screenshot/png 以便我传递给 API

我已经安装了我的基本插件，它可以捕获图像和屏幕截图，但我想创建此功能，我可以在其中拖动 select 一个内容区域。我以前从来没有创建过这样的东西，我不知道如何在 Javascript 中创建它。

编辑：我不想为我完成这件事，我只需要了解它是如何完成的。我从未听说过 Javascript 这样做，但我知道该功能存在，因为其他扩展也这样做。

编辑 2：我发现唯一接近我想要的东西是 "html2canvas"，但我不确定如何将它变成 drag/select 元素。

干杯！

Answer 1

如果您已经有了捕获屏幕截图的部分，那么您只需将其裁剪到正确的大小就可以了吗？

那个尺寸只是一组拖动的起始坐标和结束坐标。我们可以使用 jQuery 和一个元素来制作一个简单的脚本来跟踪这一点并向用户提供反馈。这里的基本原则是：

监听 JS 事件（mousedown、mousemove、mouseup）以便了解用户在做什么
在屏幕上添加一个绝对定位的 <div> 作为您的选择。

这是一个概念证明：http://jsfiddle.net/x2xmjrya/

这是重要的 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');
    });

您还可以使用 mouseup 回调来启动截屏和裁剪

为 Google Chrome 创建拖动 select 屏幕截图

Creating a drag select screen capture for Google Chrome

javascript

jquery

google-chrome-extension