Cropping data:image/png;base64 for large print screens

Question

I'm trying to crop large print screens added in contenteditable by ctrl+v. Have tried several ways but I can't get it to work. The last methode I tried is the drawImage that's why I left it inside the code. Think i'm on the wright direction with it? Or do I need a totally other technique?

I want to use the data:image/png;base64 to store it inside the database. But with very large print screens it's to large to store in the database. Any suggestions? Thanks in advance!

Edit: I just noticed that I need to use blob field in database instead of text. This fixed the issue to store larger screenshots in database. But still do people have any advice for the use of blob and store it in database? I think cropping large screenshots would still be an improvement?

 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); } }

Answer 1

I guess these lines of code will work

var canvas = reader;
var context = canvas.getContext('2d');
context.drawImage(img, 0,0, canvas.width, canvas.height);
mod.src = canvas.toDataURL();

Thanks