forked from spen/seminar
60 lines
2.0 KiB
Plaintext
60 lines
2.0 KiB
Plaintext
|
<style>
|
||
|
|
body{max-width: 100%;}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript" src="/assets/cropper.js"></script>
|
||
|
|
<link href="/assets/cropper.css" rel="stylesheet"></link>
|
||
|
|
<img class='editimage'src="<%= @image.file.get_org_url %>">
|
||
|
|
<div class='img-preview'></div>
|
||
|
|
<button onclick='save_data()'><%= t('custom_gallery.save') %></button>
|
||
|
|
<script>
|
||
|
|
var x=[],y=[],w=[],h=[]
|
||
|
|
<% if @image.custom_album_crops.first.nil? %>
|
||
|
|
<% @image.custom_album_crops.new() %>
|
||
|
|
<% end %>
|
||
|
|
<% if !(@image.custom_album_crops.first.crop_x.to_s.empty?) %>
|
||
|
|
x.push(<%= @image.custom_album_crops.first.crop_x %>)
|
||
|
|
y.push(<%= @image.custom_album_crops.first.crop_y %>)
|
||
|
|
w.push(<%= @image.custom_album_crops.first.crop_w %>)
|
||
|
|
h.push(<%= @image.custom_album_crops.first.crop_h %>)
|
||
|
|
<% end %>
|
||
|
|
$('img.editimage').on('load',function() {
|
||
|
|
var image = $('.editimage')
|
||
|
|
var options = {
|
||
|
|
data: {
|
||
|
|
x: x[0],
|
||
|
|
y: y[0],
|
||
|
|
width: w[0],
|
||
|
|
height: h[0]
|
||
|
|
},
|
||
|
|
crop: function (e) {
|
||
|
|
x[0] = e.detail.x
|
||
|
|
y[0] = e.detail.y
|
||
|
|
w[0] = e.detail.width
|
||
|
|
h[0] = e.detail.height
|
||
|
|
console.log('x:'+x+'y:'+y)
|
||
|
|
},
|
||
|
|
viewMode: 2,
|
||
|
|
zoomOnWheel: false,
|
||
|
|
autoCropArea: 1,
|
||
|
|
minContainerWidth: parseInt($('.editimage').width()),
|
||
|
|
minContainerHeight: parseInt($('.editimage').height())
|
||
|
|
};
|
||
|
|
var cropper = new Cropper(image[0],options);
|
||
|
|
});
|
||
|
|
function save_data(){
|
||
|
|
var temp = location.href.split('/').slice(-2)
|
||
|
|
var id = [temp[0]]
|
||
|
|
$.ajax({
|
||
|
|
url : '/admin/custom_galleries/save_crop',
|
||
|
|
dataType : "json",
|
||
|
|
type : "post",
|
||
|
|
data:{x:x,y:y,w:w,h:h,id:id},
|
||
|
|
success:function(data){
|
||
|
|
window.location.href = data.href;
|
||
|
|
},
|
||
|
|
error:function(){
|
||
|
|
alert('Your server has some problem, please try again later!')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|