Question

我有一些代码从网络摄像头捕获图像，然后将其放入图像中，然后使用cropper js进行裁剪，使用纵横比不受限制的正方形/矩形与纵横比为1.0的圆形区域。对于即将上载到服务器的文件，它执行类似的操作，以便可以在执行此操作之前将其裁剪。一切似乎都在起作用。我遇到的问题是我使用的是相同的裁切器，然后只是动态更新纵横比和图像src。这似乎也可行。

我遇到的问题是我还必须针对不同的宽高比更改css，如果我在更新css之前等待一小段时间也可以使用css，因此它必须是裁剪器对其某些异步执行方法和原始裁剪器的实例化。我放入了setTimeout，它可以工作（可能少于0.5秒），但是我想知道是否有一种方法可以使用Promises或其他方法来代替Timeout，尽管那确实很好。

相关问题，但这部分是在包含一些敏感信息的网站上为用户创建化身。我知道，将BLOBS存储在化身或其他图像和数据的数据库中的想法不那么普遍，但是如果化身仅存储在文件系统上会发生什么。即使您以某种方式保护了某些目录，某人浏览化身也不是一件容易的事。通常，图像只是存储在图像路径中，无论是否登录，都非常容易获得。

这是收割机的一些代码。

captureButton.on('click', function(e) {

    document.getElementById('result').src = "";
    document.getElementById('title').innerHTML = "";
    contextplayer.drawImage(player, 0, 0, playercanvas.width, playercanvas.height);
    image.src = playercanvas.toDataURL();  // the captured image is stored here.

    createCropper(image, ratio);

    setTimeout(function() {

    if (ratio == 1) {
        $(".cropper-view-box, .cropper-face").removeClass("square");
    }
    else {
        $(".cropper-view-box, .cropper-face").addClass("square");
    }
    }, 500);

});

function createCropper(image, ratio) {

    if (cropper != undefined) {
        cropper.setAspectRatio(ratio);
        cropper.replace(image.src);
    }

    else {

    cropper = new Cropper(image, {

        aspectRatio: ratio,  // 16 / 9 or 11 x 8.5 for documents
        viewMode: 3,
        dragMode: 'move',
        ready: function () {
        croppable = true;
        },
    });

    }
}

顺便说一句，该比率在其他位置设置为1.0或NaN，并且正方形类仅将边界半径设置为null或0％，因为对于这些纵横比而言，所选区域是不同的。我单选按钮可以在圆形或矩形/正方形之间来回切换。

最终，我确实希望以blob或附加到输入文件类型文件的形式上传捕获图像，但是我认为我有一些代码可以做到这一点。我确实想尝试将这些东西存储在数据库中。对于小图像，这似乎不是问题，但对于PDF或更大的图像，似乎可能是问题。

问题在cropper.js中必须是什么异步函数？

0 个答案: