Image Hacks With ImageMagick

README.md

Generating Pure Image Background

convert -size 1366x768 canvas:yellow  yello_bg.gif

Changing image background

# `-flatten` must be specified
convert in.png -background white -flatten out.png
#or use
convert in.png -fill '#CCCCCC00' -opaque none out.png

Resizing Image

# ImageMagick will try to preserve the aspect ratio
convert -resize 128x128 icon.png icon-128.png
convert -adaptive-resize 128x128 icon.png icon-128.png

# Force the image to become a specific size – even if it messes up the aspect ratio, you can add an exclamation point to the dimensions
convert -resize 128x128! icon.png icon-128.png

Compressing Image

convert -strip -interlace Plane -gaussian-blur 0.05 -quality 85% source.jpg result.jpg

Open Source Image Resource on the Internet

• Creative Commons Search
• PhotoPin
• Search Flickr with Creative Commons License
• For more, visit here

Reference

• imagemagick usage guide
• compressing image by stackoverflow
• resize imgae by howtogeek

<title>Magic Photo</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #111; font-family: sans-serif; } .magic-container { position: relative; width: 320px; height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.5); cursor: pointer; user-select: none; } .magic-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease-in-out; } #realImage { opacity: 0; } .magic-container.active #silhouetteImage { opacity: 0; } .magic-container.active #realImage { opacity: 1; } .instructions { position: absolute; bottom: 15px; width: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); padding: 8px 0; font-size: 0.9em; } </style>

மேஜிக்கைக் காண தொட்டுப் பிடியுங்கள் (Long Press)

<script> const magicArea = document.getElementById('magicArea'); let pressTimer; function startMagic() { pressTimer = setTimeout(() => { magicArea.classList.add('active'); if (navigator.vibrate) navigator.vibrate(80); }, 400); // 0.4 வினாடியில் மேஜிக் வேலை செய்யும் } function stopMagic() { clearTimeout(pressTimer); magicArea.classList.remove('active'); } magicArea.addEventListener('mousedown', startMagic); magicArea.addEventListener('mouseup', stopMagic); magicArea.addEventListener('mouseleave', stopMagic); magicArea.addEventListener('touchstart', startMagic, {passive: true}); magicArea.addEventListener('touchend', stopMagic); magicArea.addEventListener('touchcancel', stopMagic); </script>

<title>Magic Photo</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #111; font-family: sans-serif; } .magic-container { position: relative; width: 320px; height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,0.5); cursor: pointer; user-select: none; } .magic-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.4s ease-in-out; } #realImage { opacity: 0; } .magic-container.active #silhouetteImage { opacity: 0; } .magic-container.active #realImage { opacity: 1; } .instructions { position: absolute; bottom: 15px; width: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); padding: 8px 0; font-size: 0.9em; } </style>

மேஜிக்கைக் காண தொட்டுப் பிடியுங்கள் (Long Press)

<script> const magicArea = document.getElementById('magicArea'); let pressTimer; function startMagic() { pressTimer = setTimeout(() => { magicArea.classList.add('active'); if (navigator.vibrate) navigator.vibrate(80); }, 400); // 0.4 வினாடியில் மேஜிக் வேலை செய்யும் } function stopMagic() { clearTimeout(pressTimer); magicArea.classList.remove('active'); } magicArea.addEventListener('mousedown', startMagic); magicArea.addEventListener('mouseup', stopMagic); magicArea.addEventListener('mouseleave', stopMagic); magicArea.addEventListener('touchstart', startMagic, {passive: true}); magicArea.addEventListener('touchend', stopMagic); magicArea.addEventListener('touchcancel', stopMagic); </script>