Thank you so much for this video and the first one also. I am having trouble getting this to work with my server. Im echoing out all the POST values being sent to a PHP file on my server, but it is never populated with any data. Any ideas what I am missing? Thanks!
I have a question. I found this algorithm in a Udemy course and I can't figure out how or why does he use: in the if block "startHeight = (img.height - img.width) / 2;" and the opposite in the else // He uses this formula to crop from the top when the pic is portrait and from the width when it is landscape or nothing if it's a square. What is this formula about? To me it doesn't make any sense, but it works perfectly on every image. Usually it crops between 10%-15% from the height or the width. Can you explain me if this is related to Geometry? I can't find anything on the Web about it. Algorithm: // img = imgDOM, canvasDOM, function guy(img, canvas, targetWidth, targetHeight) { canvas.width = targetWidth; canvas.height = targetHeight; let startWidth; let startHeight; let width; let height; // Resizing Portrait if (img.height > img.width) { console.log("portrait"); startWidth = 0; // crop size difference / 2, if portrait startHeight = (img.height - img.width) / 2; width = img.width; height = img.width * (targetHeight / targetWidth); } else { // Resizing landscape and square images startWidth = (img.width - img.height) / 2; // if this is 0 we have a square startHeight = 0; width = img.height * (targetWidth / targetHeight); height = img.height; } ctx.drawImage( img, startWidth, // Crop start width startHeight, // Crop start height width, // Cropped width height, // Cropped height 0, // Canvas start width 0, // Canvas start height targetWidth, // Result width targetHeight // Result height ); }
Hello! Great video! I just wanted to ask if there is a way to compress this without setting a width and a height? Lets say instead of uploading an image, I clicked an image via my webcam/mobile and i want it to take the device's width/height. And because the base64 will be huge to upload to the server, i want to compress it to a particular size maybe?
I'm late to the party, but just want to say thank you for two excellent videos on JS image processing. I normally do my image processing on the backend with .Net/C#, but this was really good stuff, and well presented. Bravo!
NPM comes with node. If you are getting command npm not found but Node is found it means you need to tell your os where npm you can google for npm command not found and you will find command for your OS to add nom to system variables
Thanks for the tutorial, I found some code that over complicated this procedure which included functions and all sorts, this video has been a massive help, once ive added this to my site I will be looking at the upload to server as IM pretty sure you could save me some code. Worth a subscribe, keep it going, from the UK ;-)
