Question

我到处寻找这个。我甚至试过查看其他扩展程序，看看它是如何完成的。创建我的扩展添加的最简单方法是什么，使我能够拖动;

点击分机图标 - ＆gt;拖动/选择内容区域 - ＆gt;捕获截图/ png让我传递给API

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

编辑：我不想让我这样做，我只是想知道它是如何完成的。我从来没有听说过Javascript这样做，但我知道功能存在，因为其他扩展都是这样做的。

编辑2：我发现的唯一能够接近我想要的是＆＃34; html2canvas＆＃34;，但我不确定我是如何将其转变为拖动/选择元素。

干杯！

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创建拖动选择屏幕截图

1 个答案: