Translated from 日本語 • View original It is an image trimmer tool that imports any image into an HTML5 CANVAS, trims and resizes it with a range, and outputs it with a specified file format.
As for the processing flow,
- Search the specified directory and add only the image files to the drop-down menu.
- Overlay jQueryUI's drag-and-drop box (div layer) on top of the image loaded into CANVAS.
- When the crop button is pressed, drag and drop to get the X,Y coordinates and width of the div layer.
- Recalculate the acquired coordinates and width to the actual size ratio of the original image, crop and resize to the final output size.
- Convert the final output image into text data using the toDataURL() method of CANVAS and post it to PHP in Ajax.
- PHP side converts the received text data into JPEG/PNG binary data and outputs it to the specified location.
HTML5 and JavaScript alone cannot output binary files as local files, so I processed them in PHP.
I developed it as an extension of the image file management tool, but it is a prototype tool that has not yet seen the light of day (so the tool itself looks very good).
Usage code: HTML5, JavaScript, jQuery, PHP
It is an image trimmer tool that imports any image into an HTML5 CANVAS, trims and resizes it with a range, and outputs it with a specified file format.
As for the processing flow,
- Search the specified directory and add only the image files to the drop-down menu.
- Overlay jQueryUI's drag-and-drop box (div layer) on top of the image loaded into CANVAS.
- When the crop button is pressed, drag and drop to get the X,Y coordinates and width of the div layer.
- Recalculate the acquired coordinates and width to the actual size ratio of the original image, crop and resize to the final output size.
- Convert the final output image into text data using the toDataURL() method of CANVAS and post it to PHP in Ajax.
- PHP side converts the received text data into JPEG/PNG binary data and outputs it to the specified location.
HTML5 and JavaScript alone cannot output binary files as local files, so I processed them in PHP.
I developed it as an extension of the image file management tool, but it is a prototype tool that has not yet seen the light of day (so the tool itself looks very good).
Usage code: HTML5, JavaScript, jQuery, PHP