html2canvas Javascript скриншот и загрузить

Question

Можно ли использовать html2canvas (This), чтобы сделать снимок экрана, но и `s загрузить изображение, получить ссылку на загрузку и отправить его с помощью AJAX на веб-сервер?

если да, то как я могу это сделать?

Answer 1

Да, конечно, это возможно сделать.

Во-первых, использовать html2canvas API, чтобы сделать снимок экрана пользователя:

html2canvas(document.body).then(function(canvas) { 
}); 

Во-вторых использовать следующую функцию для преобразования возвращенного холста изображения в base64 закодированный URL (по умолчанию используется PNG):

canvas.toDataURL(); 

Specification For canvas.toDataURL

Теперь построим запрос, чтобы отправить base64 закодированный URL на сервер загрузки изображений (я использую Imgur как пример).

html2canvas(document.body).then(function(canvas) { 
    var dataURL = canvas.toDataURL(); 
    $.ajax({ 
     url: 'https://api.imgur.com/3/image', 
     type: 'post', 
     headers: { 
      Authorization: 'yourauthcode' 
     }, 
     data: { 
      image: dataURL 
     }, 
     dataType: 'json', 
     success: function(response) { 
      if(response.success) { 
       // Post the imgur url to your server. 
       $.post("yourlinkuploadserver", response.data.link); 
      } 
     } 
    }); 
}); 

После того, как изображение было загружено вы можете отправить URL загруженного изображения на веб-сервер.

Specification for $.post

Specification for $.ajax

Answer 2

Это не тестировался, но должен работать

function screenshot() { 
    html2canvas(document.body).then(function(canvas) { 
     // post using your favourite xhr polyfill, e.g. jQuery's 
     $.post('http://urlgoeshere.com', canvas.toDataURL('image/png')); 
    }); 
} 

Затем декодировать результат base64 на стороне сервера и поместить в файл

Answer 3

Используя пример выше, не забудьте добавить это к base64url, в противном случае он не будет работать:

var dataURL = canvas.toDataURL().replace(/.*,/, ''); 

Больше информации here.