为Google Chrome创建拖动选择屏幕截图 [英] Creating a drag select screen capture for Google Chrome

问题描述

我到处都在搜索此内容.我什至尝试查看其他扩展，以了解它是如何完成的.在我的扩展程序中添加附加内容以使其能够拖动的最简单方法是什么?

I have searched everywhere for this. I've even tried looking at other extensions to see how it's done. What is the simplest way to create an addition to my extension that enables me to drag;

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

Click Extension Icon -> Drag/select content area -> capture as screenshot/png for me to pass to an API

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

I've got my basic plugin down and it captures images and screenshots, but I want to create this feature, where I may drag and select a content area. I've never had to create something like this before and I've no idea how to do it in Javascript.

我不想为我完成此操作，我只需要了解它是如何完成的.我从未听说过Javascript会这样做，但是我知道该功能存在是因为其他扩展会这样做.

I don't want this done for me, I just need an idea of how it's done. I've never heard of Javascript doing this but I know the functionality exists because other extensions do this.

我发现唯一接近我想要的东西是"html2canvas"，但是我不确定如何将其变成拖动/选择元素.

Edit 2: The only thing I've found that comes close to what I want is "html2canvas", but I'm not sure how I'd turn that into a drag/select element.

干杯！

推荐答案

如果您已经拥有捕获屏幕截图的部分，那么您所需要做的就是将其裁剪为正确的大小吗?

If you already have the part that captures the screenshot all you need is to crop it to the correct size right?

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

That size is just a set of start and end coordinates for dragging. We can make a simple script using jQuery and an element to keep track of this and give feedback to the user. The basic principles here are:

1. 收听JS事件(mousedown，mousemove，mouseup)，这样您就知道用户在做什么
2. 在屏幕上添加一个绝对定位的<div>作为您的选择.

1. listen to the JS events (mousedown, mousemove, mouseup) so you know what your user is doing
2. Add an absolutely positioned <div> to the screen to be your selection.

以下是概念证明: 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回调还可以启动屏幕截图并进行裁剪

You would use the mouseup callback to also kick off the screencap and crop

这篇关于为Google Chrome创建拖动选择屏幕截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！