Question

我在js文件中或作为rails中的参数都有以下数据。 Togther有一个要发送到服务器的图像，我想要实现的是根据下面的数据裁剪图像。我不允许使用宝石:)只是使用ruby / js代码，如果我可以操作已经在js方面的图像。我正在使用cropper js生成输出给我。我该怎么做才能实现裁剪？ {"x":552.697358490566,"y":-72.49509433962258,"width":696.9599999999999,"height":696.9599999999999,"rotate":0,"scaleX":1,"scaleY":1}

Answer 1

查看小提琴：Link

这是你应该使用的代码，因为你的JSON格式与Cropper输入的格式相同：

//get the data from your rails framework and save it in a variable, below I just pasted the same data you put in your question
var data = {"x":552.697358490566,"y":-72.49509433962258,"width":696.9599999999999,"height":696.9599999999999,"rotate":0,"scaleX":1,"scaleY":1};

//remember to change my-picture to the id of your img
$('#my-picture').cropper('setData', data);

//also make sure to bind this to your own button
$('#crop-button').click(function(e){

    //this will transform the image into a blob, so you can submit it in form data
    $(this).href = $('#my-picture').cropper("getCroppedCanvas").toBlob(function (blob) {
      var formData = new FormData();

      formData.append('croppedImage', blob);

        //this is where you put your Rails path to upload
        //it's going to be a POST, so you should know how to handle it

      $.ajax('/path/to/upload', {
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function () {
          console.log('Upload success');
        },
        error: function () {
          console.log('Upload error');
        }
      });
    });
});

在轨道上裁剪图像

1 个答案: