Javascript, хранить фото с камеры (холст) на локальный / сервер - PullRequest
Новая
       7

Javascript, хранить фото с камеры (холст) на локальный / сервер

0 голосов
/ 25 сентября 2019

Проблема

Я использую JavaScript с этого сайта.

https://developers.google.com/web/fundamentals/media/capturing-images/#acquire_access_to_the_camera

Есть информация о канве, которую я могу:

  • Загрузить его прямо на сервер
  • Сохранить его локально
  • Применить эффектные эффекты к изображению

Как, например, сохранитьс холста на локальный или сервер?А как насчет фанки эффектов?:)

А можно сохранить входные данные с камеры в файл без просмотра камеры video tag Окно?

Спасибо.

Система 

Linux local 5.0.0-29-lowlatency #31-Ubuntu SMP PREEMPT Thu Sep 12 14:13:01 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux

Обновление

  • А как насчет сохранения в определенную папку?Например, та же папка, где находится скрипт javascript?Является ли это возможным?Спасибо.
  • И вопрос, возможно ли уклониться от доступа пользователя к камере?
  • И включить камеру без светового индикатора на ноутбуке, какой-нибудь шпионский режим?
  • А это возможно?просто сделать фото и сохранить на диске на сервере, когда вы посещаете веб-страницу?

1 Ответ

0 голосов
/ 25 сентября 2019

Вы можете сохранить изображение src как base64, используя canvas.toDataURL("img/png"): 

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);
    // Get the image src (base64)
    const imgSrc=canvas.toDataURL("img/png");

    // Apply the src to an image element
    const img = new Image();
    img.src = imgSrc

    // Add the newly created image to the DOM
    // A html element with the class .image-holder needs to exist on the page
    document.querySelector('.image-holder').appendChild(img);

    // Store the src in local storage
    localStorage.setItem('imgSrc', imgSrc)
  });

Чтобы сохранить его на локальном компьютере, вы можете использовать что-то вроде FileSaver (спасибо этот SO ответ): 

captureButton.addEventListener('click', () => {
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, canvas.width, canvas.height);

    // save the file
    canvas.toBlob(function(blob) {
        saveAs(blob, "image-name.jpg");
    });
  });

edit: рабочий пример здесь https://codepen.io/relativemc/pen/QWLoOZO

...