Question

我正在进行一个symfony项目，我必须用一些图像显示新闻。图像将以3个部分显示，具有不同的度量，一个在正常大小的新闻中（600x400px），另一个在新闻列表中具有小尺寸（130x130px），另一个在矩形形式的表示列表中（700x200px）。 / p>

图像适合不同的尺寸，但问题是具有低高度和宽度的矩形图像仅显示原始图像的一部分并切割其余图像。因此，用户使用插件搜索正确大小的图像并调整可见部分，滚动图像和缩放插件。

所以一切都很完美，我遇到的问题是我想要将大图像裁剪为所描述的尺寸（600x400px），但是为了向我展示插件在剪裁方面的较小比例图像。

也就是说，我有以下代码来使用插件：

JAVASCRIPT

$uploadCrop = $('#upload-demo1').croppie({
  enableExif: true,
  viewport: {
      width: 600,
      height: 400,
      type: 'square'
  },
  boundary: {
      width: 700,
      height: 500
  }
 });

 $('#upload').on('change', function () { 
   var reader = new FileReader();
    reader.onload = function (e) {
     $uploadCrop.croppie('bind', {
       url: e.target.result
     }).then(function(){
     });
    }
   reader.readAsDataURL(this.files[0]);
 });


 $('.upload-result').on('click', function (ev) {
   $uploadCrop.croppie('result', {
     type: 'canvas',
     size: 'viewport',
     format:'jpeg'
  }).then(function (resp) {
    $.ajax({
     url: Routing.generate('image_create'),
     type: "POST",
     data: {"image":resp},
     success: function (data) {
       html = '<img src="' + resp + '" />';
       $("#upload-demo-i").html(html);
     }
   });
 });
});

PHP

public function imagen_createAction()
 {
    $data = $_POST['image'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);
    $time=time();
    $imageName = $time.'-p.jpeg';
    $photoDir = $this->container->getParameter('kernel.root_dir').'/../web/uploads/news/';

    file_put_contents($photoDir.$imageName, $data);

    return new JsonResponse(array(
        'message' => 'Success!',
        'success' => true), 200);
}

您可以看到700x500的限制和600x400图像的框架，并保存它会创建该尺寸的裁剪图像。但是我没有足够的空间来显示编辑时的大小（700x500），所以我想知道是否可以使用比例测量显示容器，以便在生成剪切图像时保存为我想要的600x400。 / p>

我是新手，所以感谢您的帮助。

Answer 1

最后，我通过更改：

解决了这个问题

尺寸：'viewport'，

到

尺寸：{宽度：700，高度：200}，

如何使用Croppie插件将图像裁剪为与指定尺寸成比例的尺寸？

1 个答案: