वेब विकास में, आपको एक छवि को घुमाने की आवश्यकता हो सकती है, जो सीएसएस में करना आसान है। इस परिवर्तन की तरह सरल कोड: घुमाएँ(90डिग्री);। लेकिन अगर हम इसे JS में करना चाहें तो क्या होगा?

टीएलडीआर

ब्राउज़र वातावरण में छवि को कैनवास पर खींचता है और उसे घुमाता है। लेकिन उससे पहले, हमें मूल छवि पहलू अनुपात को बनाए रखने के लिए कुछ गणित करने की आवश्यकता है।

मुख्य

यह मानते हुए कि हमने छवि लोड कर दी है, घुमाई गई छवि की गणना निम्नानुसार की जा सकती है:

const { PI, sin, cos, abs } = Math;
const angle = (degree * PI) / 180;
const sinAngle = sin(angle);
const cosAngle = cos(angle);

const rotatedWidth = abs(imageWidth * cosAngle)   abs(imageHeight * sinAngle);

const rotatedHeight = abs(imageWidth * sinAngle)   abs(imageHeight * cosAngle);

और इसके बाद, हम वास्तविक रोटेशन करने के लिए कुछ कैनवास एपीआई का उपयोग करते हैं:

const canvas = document.createElement('canvas');

const { width: canvasWidth, height: canvasHeight } = canvas;
const canvasCtx2D = canvas.getContext('2d');

canvasCtx2D.clearRect(0, 0, canvasWidth, canvasHeight);
canvasCtx2D.translate(canvasWidth / 2, canvasHeight / 2);
canvasCtx2D.rotate(angle);

canvasCtx2D.drawImage(
  image,
  -imageWidth / 2,
  -imageHeight / 2,
  imageWidth,
  imageHeight,
);

return canvas.toDataURL('image/png');

लपेटें

कोर कोड के साथ, हम कुछ अनुकूलन कर सकते हैं और इसका उपयोग करने के लिए समर्पित रिएक्ट हुक लिख सकते हैं:

import { useEffect, useRef, useState } from 'react';

type RotatedImage = {
  src: string;
  width: number;
  height: number;
} | null;

let canvas: HTMLCanvasElement | null = null;
let canvasCtx2D: CanvasRenderingContext2D | null = null;

const getRotatedImage = (
  image: HTMLImageElement | null,
  rotation: number,
): RotatedImage => {
  canvas ??= document.createElement('canvas');
  canvasCtx2D ??= canvas.getContext('2d');

  if (!image || !canvasCtx2D) return null;

  const { width: imageWidth, height: imageHeight, currentSrc } = image;
  const degree = rotation % 360;
  if (!degree) {
    return {
      src: currentSrc,
      width: imageWidth,
      height: imageHeight,
    };
  }

  const { PI, sin, cos, abs } = Math;
  const angle = (degree * PI) / 180;
  const sinAngle = sin(angle);
  const cosAngle = cos(angle);

  canvas.width = abs(imageWidth * cosAngle)   abs(imageHeight * sinAngle);
  canvas.height = abs(imageWidth * sinAngle)   abs(imageHeight * cosAngle);

  // The width and height of the canvas will be automatically rounded.
  const { width: canvasWidth, height: canvasHeight } = canvas;

  canvasCtx2D.clearRect(0, 0, canvasWidth, canvasHeight);
  canvasCtx2D.translate(canvasWidth / 2, canvasHeight / 2);
  canvasCtx2D.rotate(angle);

  canvasCtx2D.drawImage(
    image,
    -imageWidth / 2,
    -imageHeight / 2,
    imageWidth,
    imageHeight,
  );

  const src = canvas.toDataURL('image/png');
  canvas.width = 0;
  canvas.height = 0;

  return {
    src,
    width: canvasWidth,
    height: canvasHeight,
  };
};

const useRotateImage = (imageSrc: string, rotation?: number): RotatedImage => {
  const imageEle = useRef(null);
  const [rotatedImage, setRotatedImage] = useState(null);

  useEffect(() => {
    if (typeof rotation === 'number') {
      let currImage = imageEle.current;

      if (currImage?.currentSrc !== imageSrc) {
        currImage = new Image();
        imageEle.current = currImage;

        currImage.src = imageSrc;
      }

      currImage.decode().then(
        () => setRotatedImage(getRotatedImage(currImage, rotation)),
        () => setRotatedImage(null),
      );
    }
  }, [imageSrc, rotation]);

  return rotatedImage;
};

export default useRotateImage;

यहां मैं बार-बार निर्माण को कम करने के लिए उसी कैनवास तत्व का पुन: उपयोग करता हूं। दूसरे, यह ध्यान दिया जाना चाहिए कि मैंने मेमोरी उपयोग को कम करने के लिए प्रत्येक रोटेशन के बाद इसकी चौड़ाई और ऊंचाई को 0 पर सेट किया है। वैसे, मैंने कैनवास साफ़ करने का ऑपरेशन भी किया। ऐसा इसलिए है क्योंकि HTML स्पेक में जब आप कैनवास की चौड़ाई और ऊंचाई को संशोधित करते हैं (चाहे वह पहले जैसा ही हो) कैनवास साफ़ हो जाएगा, जो कि कैनवासCtx2D.clearRect (0, 0, कैनवासविड्थ, कैनवासहाइट) के समान है, जो आधुनिक ब्राउज़रों द्वारा समर्थित है।

उपयोग रोटेटइमेज में, मैं छवि तत्व का एक संदर्भ रखता हूं और छवि.डीकोड() के बाद घुमाई गई छवि स्थिति सेट करता हूं, जिसे छवि डेटा तैयार होने के बाद हल किया जाता है।

नीचे एक ऑनलाइन उपयोग का मामला है:

यदि आपको यह उपयोगी लगता है, तो कृपया वेब विकास के बारे में अधिक उपयोगी लेखों और उपकरणों के लिए मेरे न्यूज़लेटर की सदस्यता लेने पर विचार करें पढ़ने के लिए धन्यवाद!