Estoy tratando de recortar pantallas de impresión grandes agregadas en contenteditable por ctrl + v. He probado de varias formas pero no consigo que funcione. El último método que probé es drawImage , por eso lo dejé dentro del código. ¿Crees que estoy en la dirección correcta con eso? ¿O necesito una técnica totalmente diferente?

Quiero usar data:image/png;base64 para almacenarlo dentro de la base de datos. Pero con pantallas de impresión muy grandes, es demasiado grande para almacenar en la base de datos. ¿Alguna sugerencia? ¡Gracias por adelantado!

Editar: acabo de darme cuenta de que necesito usar el campo blob en la base de datos en lugar de texto. Esto solucionó el problema para almacenar capturas de pantalla más grandes en la base de datos. ¿Pero aún así la gente tiene algún consejo para el uso de blob y almacenarlo en la base de datos? Creo que recortar capturas de pantalla grandes seguiría siendo una mejora.

 document.onpaste = function(pasteEvent) { var item = pasteEvent.clipboardData.items[0]; if (item.type.indexOf("image") === 0) { //pasteEvent.preventDefault(); //alert('You can\'t copy & paste images or screenshots yet.'); var blob = item.getAsFile(); var reader = new FileReader(); var size = pasteEvent.clipboardData.files[0].size; alert(size); //var canvas = reader; //var context = canvas.getContext('2d'); //canvas.width = canvas.height = 64; //context.drawImage(img, 64,64, 64, 64, 0, 0, 64, 64); //mod.src = canvas.toDataURL(); reader.onload = function(event) { document.getElementById("container").src = event.target.result; }; reader.readAsDataURL(blob); } if (item.type.indexOf("text") === 0) { pasteEvent.preventDefault(); const text = pasteEvent.clipboardData.getData('text'); document.execCommand("insertHTML", false, text); } }