When working with images, it’s often necessary to resize them to reduce their file size or to fit a specific aspect ratio. And let’s be real, nobody wants to get stuck with a pixelated image that’s just not quite the right size.<\/p>\n
We’ve got you all covered! In this post, we’ll explore a JavaScript function that can resize a base64 encoded image. This function is a real lifesaver and will have your images looking picture perfect in no time.<\/p>\n
The function, called The function first sets a maximum image size limit of 4MB in bytes and then converts it. Additionally, the maximum image size limit will be used as the limit for the final image size.<\/p>\n Next, the function creates an HTML Inside the To determine the new width and height of the image, the function uses the aspect ratio to calculate the size that would allow the image to fit within the maximum size in bytes. And let me tell you, it’s a real “ratio-nale” approach.<\/p>\n The function then sets the width and height of the canvas to the new values, and draws the original image on the canvas, scaled to the new size. And just like that, your image is ready for its close-up!<\/p>\n Finally, the function encodes the resized image as a JPEG, with a default quality of 80%. It then returns the image in the form of a data URL. And that’s a “snap-shot” of the final result!<\/p>\n And that’s it! With this function, you can easily resize base64.<\/p>\n Here’s the full function:<\/p>\n In conclusion, resizing images can be a hassle, but with the JavaScript function ‘resizeBase64Image’, it’s a breeze. This function takes in a single parameter, the base64 encoded image, and returns a promise that resolves with the resized image in the form of a data URL. The function also sets a maximum image size limit of 4MB in bytes, which ensures that the final image is of high quality and easy to work with. <\/p>\n Give it a try and see how it can improve your image handling process. Happy coding!<\/p>\n Lorsque vous travaillez avec des images, il est souvent n\u00e9cessaire de les redimensionner pour r\u00e9duire la taille de leur fichier ou pour les adapter \u00e0 un rapport hauteur\/largeur sp\u00e9cifique. <\/p>\n","protected":false},"author":0,"featured_media":4568,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[82],"tags":[],"class_list":["post-8149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-non-classifiee"],"acf":[],"yoast_head":"\nresizeBase64Image<\/code>, takes in a single parameter: the base64 encoded image. It returns a promise that resolves with the resized image in the form of a data URL. This function is a real “snap” to use and will make resizing images a breeze.<\/p>\nconst maxSizeInMB = 4;\nconst maxSizeInBytes = maxSizeInMB * 1024 * 1024;<\/code><\/pre>\nImage<\/code> object and sets its src<\/code> property to the base64 image. It then adds an onload<\/code> event listener to the image, which will be called when the image has finished loading.<\/p>\nconst img = new Image();\nimg.src = base64Image;\nimg.onload = function () {\n \/\/ Resizing logic goes here\n};<\/code><\/pre>\nonload<\/code> event listener, the function creates an HTML canvas<\/code> element and gets its 2D rendering context. It then stores the original width and height of the image, as well as its aspect ratio.<\/p>\nconst canvas = document.createElement(\"canvas\"); \nconst ctx = canvas.getContext('2d'); \nconst width = img.width; \nconst height = img.height; \nconst aspectRatio = width \/ height;<\/code><\/pre>\nconst newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);\nconst newHeight = Math.sqrt(maxSizeInBytes \/ aspectRatio);<\/code><\/pre>\ncanvas.width = newWidth;\ncanvas.height = newHeight;\nctx.drawImage(img, 0, 0, newWidth, newHeight);<\/code><\/pre>\nlet quality = 0.8; \nlet dataURL = canvas.toDataURL('image\/jpeg', quality); \nresolve(dataURL);<\/code><\/pre>\nresizeBase64Image: function<\/em> (base64Image) {\n return new Promise((resolve, reject) =><\/em> {\n const<\/strong> maxSizeInMB = 4;\n const<\/strong> maxSizeInBytes = maxSizeInMB * 1024 * 1024;\n const<\/strong> img = new Image();\n img.src = base64Image;\n img.onload = function<\/em> () {\n const<\/strong> canvas = document.createElement(\"canvas\");\n const<\/strong> ctx = canvas.getContext('2d');\n const<\/strong> width = img.width;\n const<\/strong> height = img.height;\n const<\/strong> aspectRatio = width \/ height;\n const<\/strong> newWidth = Math.sqrt(maxSizeInBytes * aspectRatio);\n const<\/strong> newHeight = Math.sqrt(maxSizeInBytes \/ aspectRatio);\n canvas.width = newWidth;\n canvas.height = newHeight;\n ctx.drawImage(img, 0, 0, newWidth, newHeight);\n let<\/strong> quality = 0.8;\n let<\/strong> dataURL = canvas.toDataURL('image\/jpeg', quality);\n resolve(dataURL);\n };\n });\n}<\/code><\/pre>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"