The reason is I want to use zoom in or zoom out to crop instead of resize image.
// =============== Thank you for original awesome code from the link below ========================
░░░░░░░░░░░░▄▄ ░░░░░░░░░░░█░░█ ░░░░░░░░░░░█░░█ ░░░░░░░░░░█░░░█ ░░░░░░░░░█░░░░█ ███████▄▄█░░░░░██████▄ ▓▓▓▓▓▓█░░░░░░░░░░░░░░█ ▓▓▓▓▓▓█░░░░░░░░░░░░░░█ ▓▓▓▓▓▓█░░░░░░░░░░░░░░█ ▓▓▓▓▓▓█░░░░░░░░░░░░░░█ ▓▓▓▓▓▓█░░░░░░░░░░░░░░█ ▓▓▓▓▓▓█████░░░░░░░░░█ ██████▀░░░░▀▀██████▀
Learn how to resize images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications.
This demo is required to run on local server. If you don't have one you might try using XAMPP or WAMP.
https://www.apachefriends.org/ http://www.wampserver.com/en/
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
Read more here: License
Image by Alejandro Mallea