Image Crop
Crop images locally with pointer and keyboard controls.
<div class="max-w-xl">
<%= image_crop "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+", alt: "Illustrated mountain lake", id: "image_crop_basic_demo", name: "basic_crop" %>
</div><div class="max-w-xl">
<%= image_crop "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+", alt: "Illustrated mountain lake", id: "image_crop_square_demo", aspect: 1, name: "square_crop" %>
</div><div class="max-w-xl">
<%= image_crop "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+", alt: "Illustrated mountain lake", id: "image_crop_circle_demo", circular: true, name: "circle_crop" %>
</div>