ਮੁਫ਼ਤ ਚਿੱਤਰ ਕਰੌਪਰ

ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ

ਕ੍ਰੌਪਿੰਗ HTML5 Canvas API ਵਰਤ ਕੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੁੰਦੀ ਹੈ — ਕੋਈ ਅੱਪਲੋਡ, ਕੋਈ ਸਰਵਰ ਨਹੀਂ। ਤੁਸੀਂ canvas element 'ਤੇ ਸਿੱਧਾ ਚੋਣ ਖੇਤਰ ਖਿੱਚਦੇ ਹੋ, ਅਤੇ ਕ੍ਰੌਪ ਲਾਗੂ ਕਰਨ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਬਿਲਟ-ਇਨ 2D rendering ਇੰਜਣ ਸਿਰਫ਼ ਚੁਣੇ pixels ਪੜ੍ਹ ਕੇ ਉਨ੍ਹਾਂ ਨੂੰ JPEG, PNG ਜਾਂ WebP ਵਿੱਚ ਮੁੜ-ਐਨਕੋਡ ਕਰਦਾ ਹੈ।

1. 1
   ਚਿੱਤਰ ਮੈਮਰੀ ਵਿੱਚ ਲੋਡ ਹੁੰਦਾ ਹੈ

   ਤੁਹਾਡੀ ਫ਼ਾਈਲ URL.createObjectURL() ਨਾਲ ਪੜ੍ਹੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਲੋਕਲ blob URL ਦਿੰਦਾ ਹੈ। ਇੱਕ HTMLImageElement ਫ਼ਾਈਲ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ ਡੀਕੋਡ ਕਰਦਾ ਹੈ — ਚਿੱਤਰ ਦੇ ਬਾਈਟ ਕਦੇ ਤੁਹਾਡੀ ਡਿਵਾਈਸ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾਂਦੇ।
2. 2
   Pointer Events ਕ੍ਰੌਪ ਚੋਣ ਚਲਾਉਂਦੇ ਹਨ

   ਬ੍ਰਾਊਜ਼ਰ ਦੀ Pointer Events API (ਜੋ ਮਾਊਸ, ਟੱਚ ਅਤੇ ਪੈੱਨ ਇਨਪੁੱਟ ਨੂੰ ਇਕੱਠਾ ਕਰਦੀ ਹੈ) canvas overlay 'ਤੇ ਖਿੱਚਣਾ ਟ੍ਰੈਕ ਕਰਦੀ ਹੈ। ਚੋਣ ਤੋਂ ਬਾਹਰ ਦਬਾਉਣ ਨਾਲ ਨਵਾਂ ਆਇਤ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ; ਅੰਦਰ ਦਬਾਉਣ ਨਾਲ ਇਹ ਹਿੱਲਦਾ ਹੈ; ਹੇਠਲੇ-ਸੱਜੇ ਕੋਨੇ ਨੇੜੇ ਦਬਾਉਣ ਨਾਲ ਆਕਾਰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਅਨੁਪਾਤ ਪ੍ਰੀਸੈੱਟ (1:1, 16:9, 4:3, ਆਦਿ) ਖਿੱਚਣ ਦੌਰਾਨ ਜਿਓਮੈਟਰੀ ਨੂੰ ਸੀਮਿਤ ਕਰਦੇ ਹਨ।
3. 3
   Canvas ਲਾਈਵ ਝਲਕ ਬਣਾਉਂਦਾ ਹੈ

   ਹਰ ਕ੍ਰੌਪ ਬਦਲਾਅ 'ਤੇ, Canvas 2D context ਚਿੱਤਰ ਮੁੜ ਬਣਾਉਂਦਾ ਹੈ, ਚੋਣ ਤੋਂ ਬਾਹਰ ਗੂੜ੍ਹੀ ਪਰਤ ਲਾਉਂਦਾ ਹੈ, ਕ੍ਰੌਪ ਖੇਤਰ ਸਾਫ਼ ਕਰਕੇ ਅਸਲ ਚਿੱਤਰ ਪੂਰੀ ਸਪਸ਼ਟਤਾ ਨਾਲ ਦਿਖਾਉਂਦਾ ਹੈ, ਅਤੇ ਉੱਤੇ rule-of-thirds ਗਰਿੱਡ ਅਤੇ teal ਆਕਾਰ-ਬਦਲ ਹੈਂਡਲ ਰੱਖਦਾ ਹੈ।
4. 4
   toBlob() ਨਤੀਜਾ ਐਨਕੋਡ ਕਰਕੇ ਦਿੰਦਾ ਹੈ

   ਕ੍ਰੌਪ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਸਹੀ ਕ੍ਰੌਪ ਮਾਪਾਂ 'ਤੇ ਨਵਾਂ off-screen canvas ਬਣਦਾ ਹੈ। ctx.drawImage() ਸਿਰਫ਼ ਚੁਣਿਆ ਆਇਤ ਕਾਪੀ ਕਰਦਾ ਹੈ, ਅਤੇ canvas.toBlob() ਤੁਹਾਡੀ ਚੁਣੀ ਕੁਆਲਿਟੀ ਸੈਟਿੰਗ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਮੂਲ JPEG, PNG ਜਾਂ WebP encoder ਨਾਲ ਨਤੀਜਾ ਐਨਕੋਡ ਕਰਦਾ ਹੈ। ਆਉਟਪੁੱਟ ਡਾਊਨਲੋਡ ਲਈ ਲੋਕਲ blob URL ਵਜੋਂ ਵਾਪਸ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ।

ਸੰਬੰਧਿਤ ਟੂਲ