तो मैं कैनवास के चारों ओर खेल रहा था और मैंने अपने डिवाइस हार्ड डिस्क से लोड की गई छवियों को घुमाने की कोशिश की जैसा कि नीचे देखा गया है:

class imageEdits {
    constructor(canvas, imageSrc, canvasWidth, canvasHeight) {
        this.canvas = canvas;
        this.ctx = this.canvas.getContext("2d");
        this.image = new Image();
        this.image.src = imageSrc;
        this.cWidth = canvasWidth;
        this.cHeight = canvasHeight;
    }

    rotateImage = deg => {
        this.ctx.save();

        function degToRad(deg) {
            return (1 / 57.3) * deg;
        }

        let imageHeight = this.image.naturalHeight,
            imageWidth = this.image.naturalWidth;

        if (deg !== 0 && deg !== 180) {
            imageHeight = this.image.naturalWidth;
            imageWidth = this.image.naturalHeight;
        } else {
            (imageHeight = this.image.naturalHeight),
                (imageWidth = this.image.naturalWidth);
        }
        const {
            canvasStyle: { height, width, scale, aspectRatio },
        } = this.computeAspectRatio(imageHeight, imageWidth);
        console.log({ height, width, scale, aspectRatio });
        const halfWidth = width / 2;
        const halfHeight = height / 2;
        this.ctx.translate(halfWidth, halfHeight);

        this.ctx.rotate(degToRad(deg));
        this.canvas.style.transform = `scale3d(${scale}, ${scale}, 1)`;
        this.canvas.style.backgroundColor = "rgb(0,0,0)";
        this.canvas.style.transformOrigin = `top left`;
        console.log({ width, height });
        this.ctx.drawImage(this.image, -halfWidth, -halfHeight, width, height);

        this.ctx.restore();
    };

    computeAspectRatio = (imageHeight, imageWidth) => {
        const height = imageHeight;
        const width = imageWidth;

        (scale = 1), (canvasStyle = {});

        this.canvas.width = width;
        this.canvas.height = height;

        const scaleX = this.cWidth / width;
        const scaleY = this.cHeight / height;

        if (scaleX > scaleY) scale = scaleY;
        else scale = scaleX;

        canvasStyle = { height, width, scale };

        return { canvasStyle };
    };
}

कोड के साथ समस्या यह है कि जब मैं छवि को उसके पहलू अनुपात के व्युत्क्रम में घुमाता हूं जो कि 180 डिग्री का 90 डिग्री है, तो छवि केंद्रित हो जाती है और पूरी चौड़ाई या ऊंचाई नहीं लेती है जैसा कि कैनवास का हो सकता है।

यहाँ कार्य कोड का एक jsfiddle है

और यही मेरा अपेक्षित आउटपुट दिखना चाहिए

लेकिन इसके बजाय मुझे यही मिलता है

कृपया क्या कोई देखता है कि मैं क्या गलत कर रहा हूं? अग्रिम में धन्यवाद :)

0
Prince Sule 23 सितंबर 2020, 16:25

1 उत्तर

सबसे बढ़िया उत्तर

आम तौर पर केंद्र के चारों ओर एक घूर्णन कैनवास के मध्य-बिंदु पर संदर्भ का अनुवाद करके, संदर्भ घूर्णन करके और अंत में छवि को क्षैतिज रूप से इसकी चौड़ाई के नकारात्मक आधे हिस्से में और इसकी ऊंचाई के नकारात्मक आधे हिस्से को लंबवत रूप से चित्रित करके किया जाता है।

आपके मामले में जो चीज चीजों को थोड़ा कठिन बनाती है, वह यह है कि छवि को हमेशा पूरे कैनवास को भरना चाहिए, जबकि इसका सही पहलू अनुपात बनाए रखना चाहिए। ऐसा करने के लिए हमें किसी दिए गए कोण पर छवि की सटीक चौड़ाई और ऊंचाई - या अधिक सटीक रूप से यह बाउंडिंग बॉक्स जानने की आवश्यकता होगी। सौभाग्य से हमें केवल चार कोणों से निपटना है, इसलिए यह केवल चौड़ाई और ऊंचाई को 90° और 270° पर स्वैप करने की बात है - जैसा कि आपने पहले ही किया था।

अब जब हम छवि के आयामों को जानते हैं तो हमें दोनों अक्षों के साथ पैमाने की गणना करने की आवश्यकता है और देखें कि उनमें से कौन सा गुणन के बाद कैनवास की चौड़ाई और ऊंचाई से अधिक नहीं है।

इस पैमाने का उपयोग तब संदर्भ को मापने के लिए किया जाता है - न कि उस सीएसएस पैमाने का जिसका उपयोग आपने कैनवास को आकार देने के लिए किया था।

यहां आपके कोड के आधार पर एक उदाहरण दिया गया है (बस 'रन कोड स्निपेट' पर क्लिक करें):

const canvas = document.getElementById("edit-canvas");
const ctx = canvas.getContext("2d");
const canvasWidth = 320;
const canvasHeight = 200;

let deg = 0;
let image;

canvas.width = canvasWidth;
canvas.height = canvasHeight;

function degToRad(deg) {
  return (1 / 57.3) * deg;
}

function draw() {
  let scale, imageHeight, imageWidth, scaleX, scaleY;
  if (deg != 0 && deg != 180) {
    imageHeight = image.width;
    imageWidth = image.height;
  } else {
    imageHeight = image.height;
    imageWidth = image.width;
  }
  scaleX = canvasWidth / imageWidth;
  scaleY = canvasHeight / imageHeight;

  if (imageWidth * scaleX <= canvasWidth && imageHeight * scaleX <= canvasHeight) {
    scale = scaleX;
  } else {
    scale = scaleY;
  }

  ctx.save();
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  ctx.translate(canvasWidth / 2, canvasHeight / 2);
  ctx.rotate(degToRad(deg));
  ctx.scale(scale, scale);
  ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height);

  ctx.restore();
}

image = new Image();
image.onload = draw;
image.src = "https://picsum.photos/id/1079/300/200";

document.getElementById("rotate").addEventListener("click", () => {
  deg += 90;
  if (deg == 360) deg = 0;

  draw();
});
<div class="canvas-container">
  <input type="button" id="rotate" style="padding: 10px; font-size: 16px; position: absolute" value="Rotate" />
  <canvas id="edit-canvas" style="border: 1px solid #000; margin-left: 10px;background-color: #c1f0c1;"></canvas>
</div>
1
obscure 25 सितंबर 2020, 10:38