标签: cropperjs

我正在尝试从cropperjs 获取裁剪后的图像结果，但我不知道如何获取它。我尝试在网上搜索但找不到解决方案。

我的代码如下所示。

$(function () 
  {


  $image=null;

  var img = document.createElement("IMG");
  img.src = "";
  img.setAttribute('id', "showImage");
  document.getElementById("img-container").appendChild(img);

  var url = canvas.toDataURL();
  canvasImage.src = url;
  console.log(canvasImage);

  document.getElementById("showImage").src=canvasImage.src;
  $image = $('#showImage');
  $image.cropper({
    movable: true,
    zoomable: false,
    rotatable: false,
    scalable: false
  });

  $('#replace').on('click', function () {   
    var croppedimage = new Image();
    var cropBoxData = $image.cropper('getCropBoxData');
    croppedimage=$image.data('cropper');
    // croppedimage= this.cropper.
    console.log($image);
  });
});

我试图破坏cropper当模型关闭这里是我的代码我使用https://github.com/fengyuanchen/cropperjs

var image = document.getElementById('image_cropper'); 
var cropper = new Cropper(image); 
cropper.destroy(); 
cropper = null;
var cropper = new Cropper(image , options); // options are defined on top

我选择一个图像并在选择新图像后关闭模型,这是结果

我正在使用cropper.js（https://github.com/fengyuanchen/cropperjs）来操作图像，但我找不到以编程方式裁剪图像的方法。

我想做的是在初始化裁剪器后立即创建裁剪预览。

var cropper = new Cropper(document.getElementById('img'), {
    autoCrop: true,
    autoCropArea: 1,
    aspectRatio: 500 / 660,
    minCropBoxWidth: 500,
    minCropBoxHeight: 660,
    viewMode: 2
});

我已autoCrop启用，但如果我尝试获取数据，cropper.getCroppedCanvas()它会返回null.

我注意到这cropper.cropped是错误的，所以我可能需要触发初始裁剪，但不知道如何触发。

我正在使用 ng-file-upload 来预览和上传图像。在上传图像之前，我想让用户裁剪图像。我尝试使用 ng-img-crop，但它没有我想要的功能（宽高比自定义），但是cropper 有（https://github.com/fengyuanchen/cropper/）。我现在唯一的问题是如何使用cropper 裁剪图像的预览。图像 src 最终成为一个 blob，即“blob:XYZ”。有没有人以这种方式成功使用过cropper？是否可以？

我正在使用cropper.js的jquery 版本。到目前为止，该脚本运行良好。

但有一件事我做不到。我希望裁剪图片的纵横比为 16 / 9，宽度为 280 像素，高度为 158 像素。

那个脚本可以吗？

我有以下选择，但似乎没有一个适合我的需求：

minContainerWidth
Type: Number
Default: 200
The minimum width of the container.

minContainerHeight
Type: Number
Default: 100
The minimum height of the container.

minCanvasWidth
Type: Number
Default: 0
The minimum width of the canvas (image wrapper).

minCanvasHeight
Type: Number
Default: 0
The minimum height of the canvas (image wrapper).

minCropBoxWidth
Type: Number
Default: 0
The minimum width of the crop box.

Note: This size is relative to …

我正在使用cropper.js v0.8.0

我使用下面的 jQuery 代码来裁剪图像。

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_view').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }

function initCropper(){
        // console.log("Came here")
        var image = document.getElementById('img_view');
        var cropper = new Cropper(image, {
          aspectRatio: 1/1,
          cropBoxResizable: false,
          crop: function(e) {
            // console.log(e.detail.x);
            // console.log(e.detail.y);
          }
        });

        // On crop button clicked
        document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            document.getElementById("cropped_result").appendChild(img);

            /* ---------------- SEND …

该方法在就绪事件中被调用。在第一次调用时它有效。当模态关闭时，我正在破坏cropper - cropper.destroy()。第二次打开模态后，裁剪器再次初始化，但这次cropper.getCroppedCanvas()返回null

let cropper = new Cropper(image, {
                dragMode: 'move',
                aspectRatio: ratio,
                restore: false,
                guides: false,
                center: false,
                highlight: false,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
                ready: function () {

                    modal.find(".save").on("click", function () {
                        console.log(cropper.getCroppedCanvas())
                        cropper.getCroppedCanvas().toBlob(function (blob) {
                            let formData = new FormData()
                            formData.append("croppedImage", blob)

                            jQuery.ajax({
                                method: "post",
                                url: "index.php?option=com_image_slideshows&task=slideshow.saveCroppedImage",
                                data: formData,
                                processData: false,
                                contentType: false
                            })
                            .done(function (response) {
                                modal.modal("hide")
                            })
                        })
                    })

                    cropper.crop()
                }
            })

在模态关闭时会发生这种情况：

modal.on("hidden.bs.modal", function () {
                cropper.destroy()
                jQuery("#cropper-modal .modal-body").html(
                    jQuery("<img>", …

我正在维护一个用 Angular 9 编写的 Web 应用程序（PWA），用户可以在 Cropperjs 中上传图像并裁剪、旋转等。

在 iOS 上，一种新的图像格式 (HEIF) 正在成为标准，这些用​​户抱怨他们无法上传照片。似乎iOS有时会自动转换为jpg，有时则不会。因此我们需要能够接收 HEIF 格式的图像。

我尝试将 mimetype image/heif 添加到accept，但 *.heic 图像在 iOS 上仍然呈灰色。我似乎很多人只是选择接受所有文件，但这不是这个网络应用程序的选项。

而且cropperjs不支持HEIF图像格式，那么我们如何转换为已知的Web格式呢？

我使用的是最新的cropper.js反应包反应，种植者在我当前的项目和我'刚刚失去了。问题是，裁剪区域可以超出图像，这不应该。我已经尝试了我能想到的一切。

这是 _crop 方法，在cropper 中的每次更改时都会调用该方法。

componentDidMount = () => {
    sessionStorage.setItem('shouldMove', false)
  }

_crop = ( e ) => {
    var canvasData = document.getElementsByClassName('cropper-hidden') 
    [0].cropper.canvasData
    var cropBoxData = this.refs.cropper.getCropBoxData();

    if ( sessionStorage.getItem('shouldMove') === 'false' ) {
      sessionStorage.setItem( 'currentLeft', cropBoxData.left )
      sessionStorage.setItem( 'currentTop', cropBoxData.top )
      sessionStorage.setItem('shouldMove', true)
    }else {
      if (
        cropBoxData.left <= canvasData.left ||
        cropBoxData.top  <= canvasData.top  ||
        cropBoxData.left + cropBoxData.width > canvasData.width + 
        canvasData.left ||
        cropBoxData.top + cropBoxData.height > canvasData.height + 
        canvasData.top
      ) {
        cropBoxData.left = sessionStorage.getItem( …

我正在使用cropperjs 裁剪图像。我的裁剪功能是这样的：

function GestionCropEventPhoto(CtrlID) {
$('#' + CtrlID + '_event_img').cropper({
    aspectRatio: 1,
    autoCropArea: 1,
    crop: function (e) {
        var json = [
            '{"x":' + e.x,
            '"y":' + e.y,
            '"height":' + e.height,
            '"width":' + e.width,
            '"rotate":' + e.rotate + '}'
        ].join();
    }
});

var Values = {}
Values["eventid"] = $('#' + CtrlID + '_PEventID_HF').val();
$('#' + CtrlID + '_fileupload', this.el).fileupload({
    url: gestionPath + "/App_Dynamic/WS_Gestion.asmx/UploadedEventPhoto",
    autoUpload: true,
    type: 'POST',
    dataType: 'json',
    submit: function (e, data) {
        data.formData = Values;
    },
    start: function …

我克服了很多解决方案和建议，但对我没有任何作用。我正在使用 dropzone 进行图像上传和cropper js 来裁剪图像。但是每次裁剪图像后，图像质量都会降低（模糊）

实际图像

https://i.stack.imgur.com/UsVqz.jpg

裁剪图像
https://i.stack.imgur.com/snAuB.png

   //This is my cropper js code, As per the documentation I have set max height, max width, imageSmoothingQuality etc. But still image qualty get reduced after crop.
   var $cropperModal = $("<div>Company Logo</div>");
   $cropperModal.modal('show').on("shown.bs.modal", function() {
     var $image = $('#img-' + c);
     var cropper = $image.cropper({
       aspectRatio: 1//,
     }).on('hidden.bs.modal', function() {
       $image.cropper('destroy');
     });

     //After I uploaded the image, Below code allow me to crop the image

     $cropperModal.on('click', '.crop-upload', function() {
       $image.cropper('getCroppedCanvas', { …

我正在构建一个图像列表，可以使用 Cropper js 通过 boostrap 模式进行修改。

 <% crop.forEach(function(crops) { %>
    <div class="card mb-4 box-shadow" style="margin-right: 1em;">
      <img data-enlargable class="card-img-top" src="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
        alt="<%= crops.nom %>" style="max-height: 255px; max-width: 348px; object-fit: contain; cursor: zoom-in;">
      <input type="hidden" id="dataImage" data-catname="<%= crops.cat_nom %>" data-idcrop="<%= crops.cropped_id %>">
      <div class="card-body">
        <h5 class="card-title"><%= crops.cat_nom %></h5>
        <p class="card-text"><%= crops.nom %></p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="btn-group">
            <button type="button" name="edit" class="btn btn-sm btn-outline-secondary"
              data-path="/photos/cropped_images/<%= crops.cat_nom %>/<%= crops.nom %>"
              data-target="#modal" data-toggle="modal">Edit</button>
          </div>
        </div>
      </div>
    </div>
<% }) %> …

从 vue-cropper.js 示例中，我找不到像选项中的 jquery 版本那样设置宽高比的方法。在jquery版本中，您可以将选项传递给使用作物的元素，在这个我找不到答案..

  <div id="app">
    <h2 style="margin: 0;">Vue CropperJS</h2>
    <hr/>
    <input type="file" name="image" accept="image/*"
           style="font-size: 1.2em; padding: 10px 0;"
           @change="setImage" />
    <br/>
    <div style="width: 400px; height:300px; border: 1px solid gray; display: inline-block;">
      <vue-cropper
          ref='cropper'
          :guides="true"
          :view-mode="2"
          drag-mode="crop"
          :auto-crop-area="0.5"
          :min-container-width="250"
          :min-container-height="180"
          :background="true"
          :rotatable="true"
          :src="imgSrc"
          alt="Source Image"
          :img-style="{ 'width': '400px', 'height': '300px' }">
      </vue-cropper>
    </div>
    <img :src="cropImg" style="width: 200px; height: 150px; border: 1px solid gray" alt="Cropped Image" />
    <br/>
    <br />

    <button @click="cropImage" v-if="imgSrc != ''" style="margin-right: 40px;">Crop</button>
    <button @click="rotate" …