在軌道上裁剪圖像

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已經格式化以同樣的方式克羅珀取其輸入：

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