javascript - 为 Google Chrome 创建拖动选择屏幕截图

Question

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

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

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

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

编辑 2:我发现唯一接近我想要的东西是“html2canvas”，但我不确定如何将它变成拖动/选择元素。

干杯!

Answer 1

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

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

1. 监听 JS 事件(mousedown、mousemove、mouseup)，这样您就知道您的用户在做什么
2. 添加绝对定位 <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回调也开始截屏和裁剪