为 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回调来启动截屏和裁剪