在导轨上裁剪图像 [英] Cropping an image on rails

问题描述

我的 js 文件或 rails 中的参数都有以下数据.一起有一个要发送到服务器的图像，我想要实现的是根据如下数据裁剪图像.我不允许使用 gems :) 如果我可以操作 js 端已经存在的图像，则只使用 ruby​​/js 代码.我正在使用cropper js，它为我生成了输出.我应该怎么做才能实现裁剪?{"x":552.697358490566,"y":-72.49509433962258,"width":696.9599999999999,"height":696.95999999999999,"scale,"code"10>

I have the following data both in my js file or as a param in rails. Togther there is an image that is to be sent to server, what I want to achieve is to crop the image based on the data such as below. I am not allowed to use gems :) just using ruby/js code if I can manipulate the image already in js side. I am using cropper js which generated the output to me. What should I do to achieve cropping ? {"x":552.697358490566,"y":-72.49509433962258,"width":696.9599999999999,"height":696.9599999999999,"rotate":0,"scaleX":1,"scaleY":1}

推荐答案

查看小提琴:链接

这是您应该使用的代码，因为您的 JSON 已经按照 Cropper 输入的方式进行了格式化:

This is the code you should be using, since your JSON is already formatted the same way Cropper takes its input:

//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');
        }
      });
    });
});

这篇关于在导轨上裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！