CODEWITHSUNDEEP
javascriptjquerycssimagecroppie
snouck.socmed
snouck.socmed

Reputation: 19

Croppie.js out frame

iam follow tutorial from this, to create image framer web app. From that example, croppie.js is used to crop and preview image before upload to backend. And in that example boundary and viewport is set for 400px (width and height), so the code is like this:

  window.croppie = new Croppie(document.getElementById("crop-area"), {
    "url": url,
    boundary: {
      height: 400,
      width: 400
    },
    viewport: {
      width: 400,
      height: 400
    },
  });

What i need is the size for boundary and viewport is 1050px, so my code is like below:

  window.croppie = new Croppie(document.getElementById("crop-area"), {
    "url": url,
    boundary: {
      height: 1050,
      width: 1050
    },
    viewport: {
      width: 1050,
      height: 1050
    },
  });

But when i set size to 1050px the image is out of frame, and also when open from mobile image is out of frame too. So my goal is to crop image in 1050px size, but in responsive screen, i mean it can responsive based on screen size. I have tried using bootstrap img-fluid class but it still not working. Thank you in advance.

Upvotes: 0

Views: 766

Answers (1)

Dula
Dula

Reputation: 1412

I had this issue because of a silly mistake which ate up hours of my time. When you include the croppie.css file into the page like below the image goes out of the frame and acts weird and zooms way out of proportion.

<link type="text/css" href="/plugins/croppie/croppie.css"/>

Example: enter image description here

To fix it it you have to include the croppie.css file like below.

<link rel="stylesheet" href="/plugins/croppie/croppie.css"/>

Example: enter image description here

Just changed <link type="text/css" to <link rel="stylesheet" which fixed the issue. No idea why but might help save someones time.

Upvotes: 0

Related Questions