¿Sería posible usar html2canvas para tomar una foto de la pantalla del usuario, pero también quiero usar esta imagen con la función python? Lo que quiero hacer es guardar la imagen del elemento html con javascript y enviarlo a slack con python.
function capture() { html2canvas(document.getElementById("main"), { letterRendering: 1, allowTaint: true, useCORS: true, }) .then(function (canvas) { document.getElementById("result").src = canvas.toDataURL("image/png", 0.5); }) .catch((e) => { alert(e); }); }Puede usar la función HTMLCanvasElement.toBlob para convertir la imagen del lienzo en un Blob que puede enviar a través de fetch .
.then(function (canvas) { canvas.toBlob(blob => { fetch("URL", { method: 'POST', headers: { 'Content-Type': 'image/png' } body: blob }) const imgSrc = URL.createObjectURL(blob); document.getElementById("result").onload = () => URL.revokeObjectURL(imgSrc); document.getElementById("result").src = imgSrc; }, "image/png", 0.5) });resolví un problema así;
JS;
<script> function capture() { html2canvas(document.getElementById("main"), { letterRendering: 1, allowTaint: true, useCORS: true, }) .then(function (canvas) { document.getElementById("result").src = canvas.toDataURL("image/png", 0.5); var img = canvas.toDataURL(); $.ajax({ type: "POST", url: "{% url 'sendtoslack' %}", data: { "imageData": img, csrfmiddlewaretoken: '{{ csrf_token }}' } }) }) .catch((e) => { alert(e); }); } </script>vista;
image = request.POST.get('imageData')decodificación base64;
import base64 imagestr = str(image) x = imagestr[22:] img = Image.open(io.BytesIO(base64.decodebytes(bytes(x, "utf-8"))))