Странное поведение изображения с использованием Javascript и элемента Canvas

Question

Я пытаюсь использовать выходные данные вызова toDataURL для элемента canvas.

var snapshotjig = document.getElementById("snapParent");
var testOutput = document.createElement('canvas');
var ctxtest = testOutput.getContext('2d');
var imageTest = new Image();
var canvas = capture(video, scaleFactor);    

imageTest.src = canvas.toDataURL();
ctxtest.drawImage(imageTest,0,0,imageTest.width, imageTest.height);
snapshotjig.appendChild(testOutput);

для завершения код захвата выглядит так:

function capture(video, scaleFactor) {
    if(scaleFactor == null){
        scaleFactor = 1;
    }
    var w = video.videoWidth * scaleFactor;
    var h = video.videoHeight * scaleFactor;
    var canvas = document.createElement('canvas');
        canvas.width  = w;
        canvas.height = h;
    var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
    return canvas;
}

В html есть элемент div с идентификатором «snapParent». Кажется, что функция захвата работает нормально, но в экземпляре, который я использую toDataUrl, а затем пытаюсь нарисовать этот вывод, я получаю различные результаты, в тот момент, когда я получаю небольшую часть изображения в моем элементе div snapParent. Не уверен, что вызывает это или что я делаю неправильно.

Буду очень признателен за любые мысли по этому поводу. Я пытаюсь использовать toDataUrl, чтобы взять изображение и использовать его в функции, которая позволит мне превратить его в интерактивный Jigsaw, этот код принимает URL в данный момент, замена его на вывод toDataUrl должна быть тривиальной, я просто не могу понять, почему мое изображение обрезается.

Answer 1

В дополнение к предложению Pointy я обнаружил, что у холста, которым я пользовался testOutput, не были заданы ширина и высота, так как используются значения по умолчанию для браузера, который я использую, и этого оказывается достаточно, чтобы показать небольшую часть изображения.,Контекст не в том месте, где вы устанавливаете размер, но предложение Пойнти заставило меня снова взглянуть на настройку размеров холста, приветствие.

Я использую метод захвата, чтобы установить размеры холста testOutput.

Answer 2

Мне кажется, что вы забыли установить ширину и высоту вашего холста "ctxtest".