javascript - Croppie.js 出框架

Question

我从这个教程开始，创建图像成帧器网络应用程序。在该示例中，croppie.js 用于在上传到后端之前裁剪和预览图像。在该示例中，边界和视口设置为 400px（宽度和高度），因此代码如下：

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

我需要的是边界和视口的大小是1050px，所以我的代码如下：

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

但是当我将大小设置为 1050 像素时，图像超出框架，并且当从移动图像打开时，图像也超出框架。所以我的目标是裁剪 1050px 大小的图像，但在响应式屏幕中，我的意思是它可以根据屏幕大小做出响应。我曾尝试使用 bootstrap img-fluid类，但它仍然无法正常工作。先感谢您。

Answer 1

我遇到这个问题是因为一个愚蠢的错误占用了我几个小时的时间。当您将croppie.css文件包含到下面的页面中时，图像会超出框架并且行为怪异并且不成比例地缩放。

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

例子：

要修复它，您必须包含如下croppie.css文件。

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

例子：

只是更改<link type="text/css"为<link rel="stylesheet"解决问题的那个。不知道为什么，但可能有助于节省某人的时间。