ਮੁਫ਼ਤ ਚਿੱਤਰ ਘੁਮਾਉਣ ਅਤੇ ਫਲਿੱਪ ਕਰਨ ਵਾਲਾ

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

ਇੱਥੇ ਘੁਮਾਉਣਾ, ਉਲਟਾਉਣਾ ਅਤੇ ਕੋਣ ਸੁਧਾਰ HTML Canvas API ਵਰਤ ਕੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਅੰਦਰ ਚੱਲਦੇ ਹਨ — ਕੋਈ ਫ਼ਾਈਲ ਕਦੇ ਸਰਵਰ ਨੂੰ ਨਹੀਂ ਭੇਜੀ ਜਾਂਦੀ। ਟੂਲ ਚੁਣੇ ਕੋਣ ਅਤੇ scale transforms ਨਾਲ ਤੁਹਾਡੇ ਚਿੱਤਰ ਨੂੰ off-screen canvas 'ਤੇ ਬਣਾਉਂਦਾ ਹੈ, ਫਿਰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਆਪਣੇ codec ਨਾਲ ਨਤੀਜੇ ਨੂੰ JPEG, PNG ਜਾਂ WebP ਵਿੱਚ ਐਨਕੋਡ ਕਰਦਾ ਹੈ।

1. 1
   ਚਿੱਤਰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਡੀਕੋਡ ਹੁੰਦਾ ਹੈ

   ਤੁਹਾਡੀ JPEG, PNG ਜਾਂ WebP ਫ਼ਾਈਲ ਇੱਕ ਲੋਕਲ object URL ਰਾਹੀਂ HTMLImageElement ਵਿੱਚ ਲੋਡ ਹੁੰਦੀ ਹੈ — ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਮੈਮਰੀ ਹਵਾਲਾ ਜੋ ਕਦੇ ਤੁਹਾਡੀ ਡਿਵਾਈਸ ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾਂਦਾ। ਕੁਦਰਤੀ pixel ਮਾਪ ਸਿੱਧੇ ਡੀਕੋਡ ਕੀਤੇ bitmap ਤੋਂ ਪੜ੍ਹੇ ਜਾਂਦੇ ਹਨ।
2. 2
   Canvas transform ਲਾਗੂ ਹੁੰਦਾ ਹੈ

   ਇੱਕ off-screen canvas ਘੁੰਮੇ bounding box ਵਿੱਚ ਫਿੱਟ ਹੋਣ ਦੇ ਆਕਾਰ ਦਾ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (ਹਰ ਧੁਰੇ ਲਈ width·cos + height·sin)। ਫਿਰ Canvas 2D context ਨੂੰ ਕੇਂਦਰ ਤੱਕ ਖਿਸਕਾਇਆ, ਚੁਣੇ ਕੋਣ (radians ਵਿੱਚ) ਨਾਲ ਘੁਮਾਇਆ, ਅਤੇ ਉਲਟਾਉਣ ਲਈ ਲੇਟਵੇਂ ਜਾਂ ਖੜ੍ਹਵੇਂ ਧੁਰੇ 'ਤੇ -1 ਨਾਲ scale ਕੀਤਾ ਜਾਂਦਾ ਹੈ — ਸਭ ਮਿਆਰੀ ctx.rotate / ctx.scale ਕਿਰਿਆਵਾਂ, ਬਿਨਾਂ ਕਿਸੇ ਬਾਹਰੀ ਲਾਇਬ੍ਰੇਰੀ ਦੇ।
3. 3
   ਆਟੋ-ਕ੍ਰੌਪ ਕੋਨੇ ਕੱਟਦਾ ਹੈ (ਵਿਕਲਪਿਕ)

   ਗ਼ੈਰ-ਸਮਕੋਣ ਘੁਮਾਅ ਲਈ, ਇੱਕ ਹੱਥ ਨਾਲ ਲਿਖਿਆ ਜਿਓਮੈਟਰੀ function — largestInnerRect — ਅਸਲ ਅਨੁਪਾਤ ਵਾਲਾ ਸਭ ਤੋਂ ਵੱਡਾ ਧੁਰਾ-ਸਮਾਨਾਂਤਰ ਆਇਤ ਗਿਣਦਾ ਹੈ ਜੋ ਘੁੰਮੇ bounding box ਅੰਦਰ ਫਿੱਟ ਹੋਵੇ, ਤਾਂ ਜੋ ਤਿਕੋਣੇ ਖ਼ਾਲੀ ਕੋਨੇ ਚਿੱਤਰ ਨੂੰ ਵਿਗਾੜੇ ਬਿਨਾਂ ਹਟ ਜਾਣ।
4. 4
   ਬ੍ਰਾਊਜ਼ਰ codec ਨਤੀਜਾ ਐਨਕੋਡ ਕਰਦਾ ਹੈ

   canvas.toBlob() pixel ਡਾਟਾ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਬਿਲਟ-ਇਨ image encoder ਨੂੰ ਦਿੰਦਾ ਹੈ, ਇੱਕ JPEG (ਚੁਣਨਯੋਗ ਕੁਆਲਿਟੀ ਅਤੇ ਪਾਰਦਰਸ਼ੀ ਕੋਨਿਆਂ ਲਈ ਪਿਛੋਕੜ ਭਰਨ ਰੰਗ ਨਾਲ), PNG, ਜਾਂ WebP Blob ਬਣਾਉਂਦੇ ਹੋਏ ਜਿਸਨੂੰ ਤੁਸੀਂ ਸਿੱਧਾ ਡਾਊਨਲੋਡ ਕਰਦੇ ਹੋ।

ਸੰਬੰਧਿਤ ਟੂਲ