tuan
1/6/2015 - 3:22 AM
JScrop upload and drop image in wordpress
JScrop upload and drop image in wordpress
<?php
public function add_event_drop_pimage() {
$changes = json_decode( wp_unslash($_REQUEST['history']) );
$sel = $changes[0]->c;
if($sel->w ===0 || $sel->h === 0) return;
$info = $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE];
require ABSPATH.'wp-admin/includes/image-edit.php';
$path = $info['file'];
$type = $info['type'];
$oname = $info['oname'];
$img = wp_get_image_editor($path);
if(is_wp_error($img)) {
wp_send_json(array(
'error'=> true,
'data' => array(
'msg' => __('create image from path error', 'apollo')
)
));
}
/* Drop here */
$img->crop( $sel->x , $sel->y , $sel->w , $sel->h );
/* remove all path */
@unlink($path); /* remove old path */
/* generate image for server */
$uploads = wp_upload_dir();
$fname = wp_unique_filename($uploads['path'], $oname);
$filename = $uploads['path'].'/'.$fname;
$img->save( $filename, $type );
$url = $uploads['url'] . "/$fname";
// update new info session
$_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE] = array(
'file' => $filename,
'type' => $type,
'oname' => $oname,
'url' => $url,
);
$metafile = $img->get_size();
wp_send_json(array(
'error'=> false,
'data' => array(
'file' => array(
'url' => $url,
'meta' => $metafile
)
)
));
}
public function when_submit_button_press() {
$info = $_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE];
$type = $info['type'];
$url = $info['url'];
$fname = $info['oname'];
$filename = $info['file'];
/* rename filename */
$upload_path = Apollo_App::getUploadBaseInfo('path');
$upload_url = Apollo_App::getUploadBaseInfo('url');
$safe_title = preg_replace('/[^a-z0-9A-Z]/', '-', $this->event_name);
$new_fname = 'primary-'. $safe_title .'-'.time();
$filename2 = $upload_path.'/'. $new_fname;
rename($filename, $filename2);
$_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE]['file'] = $filename2;
$_SESSION['apollo'][Apollo_SESSION::EVENT_ADD_PIMAGE]['url'] = $upload_url . '/' . $new_fname;
$attachment = array(
'post_mime_type' => $type,
'guid' => $url,
'post_title' => $new_fname,
'post_content' => '',
);
$id = wp_insert_attachment($attachment, $filename2, $this->event_id);
if ( !is_wp_error($id) ) {
require_once(ABSPATH . "wp-admin" . '/includes/image.php');
wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $filename2 ) );
set_post_thumbnail( $this->event_id, $id );
}
}/*
$primary_img_sel: main image you want to drop
boxWidth: box contain image. which you want. I usally less than image size
boxHeight: same boxWidth
trueSize: True size of image
keySupport: there are on bug in current i write. When i press image it alwasy go to bottom of page
onChange: when we click on the image. I will change coordinate and width and height. c.w, c.h, c.x, c.y, c.x2, c.y2
*/
$primary_img_sel.Jcrop({
allowSelect: true
, boxWidth: current_newimg_browser_size.width //Maximum width you want for your bigger images
, boxHeight: current_newimg_browser_size.height //Maximum Height for your bigger images
, trueSize: [current_img_actualy_size.width,current_img_actualy_size.height]
, keySupport: false
, onChange: function(c) {
var _w = Math.round(c.w);
var _h = Math.round(c.h);
want_size_w = _w;
want_size_h = _h;
want_pos_x = c.x;
want_pos_y = c.y;
var _info = $('<div class="info" style=" position: absolute; top:50%; left: 50%; width: 70px; height: 14px; font-size: 14px; margin-top: -7px; margin-left: -35px; text-align: center; color: '+default_info_color+'">'+ _w+'x'+ _h+'</div>');
this.ui.selection.find('.jcrop-tracker').empty().append(_info);
}
}, function() {
jcrop_api = this;
});
/* YOu want to drop it */
jcrop_api.destroy();
/* In this source when ever click upload and i check if the files change i will trigger upload automatically
I use ajaxForm for upload image. May be a next version will be plupload instead
*/
/* ALL SOURCE HERE */
var handle_primary_image_add_event = function() {
var jcrop_api;
/* Submit form */
$main_form_step1_id.ajaxForm({
beforeSubmit: function(formData, jqForm, options) {
$block_container.block(_blockUI);
},
success: function(resp, statusText, xhr, $form) {
$block_container.unblock();
if(resp.error === true) {
alert(resp.data.msg);
/* fix 1: choice image again */
$(_apl_file_upload_sel)[0].value= '';
return false;
}
/* hide upload text and show crop area */
$upload_container_sel.addClass('hidden');
$crop_contianer_sel.removeClass('hidden');
$primary_img_sel.attr('src', resp.data.file.url);
$primary_img_sel.attr('data-o_width', resp.data.file.meta.width);
$primary_img_sel.attr('data-o_height', resp.data.file.meta.height);
},
url: APL.ajax_url
});
$primary_img_sel.on('load', function(event) {
/* canculate ratio */
initImgAreaSelect();
});
var hiddenUploadBar = function() {
$upload_bar.css('visibility', 'hidden');
};
var showUploadBar = function() {
$upload_bar.css('visibility', 'visible');
};
/* set select area */
var initImgAreaSelect = function() {
current_img_actualy_size.width = parseInt($primary_img_sel.attr('data-o_width'), 10);
current_img_actualy_size.height = parseInt($primary_img_sel.attr('data-o_height'), 10);
current_newimg_browser_size.width = $primary_img_sel.width();
current_newimg_browser_size.height = $primary_img_sel.height();
$primary_img_sel.Jcrop({
allowSelect: true
, boxWidth: current_newimg_browser_size.width //Maximum width you want for your bigger images
, boxHeight: current_newimg_browser_size.height //Maximum Height for your bigger images
, trueSize: [current_img_actualy_size.width,current_img_actualy_size.height]
, keySupport: false
, onChange: function(c) {
var _w = Math.round(c.w);
var _h = Math.round(c.h);
want_size_w = _w;
want_size_h = _h;
want_pos_x = c.x;
want_pos_y = c.y;
var _info = $('<div class="info" style=" position: absolute; top:50%; left: 50%; width: 70px; height: 14px; font-size: 14px; margin-top: -7px; margin-left: -35px; text-align: center; color: '+default_info_color+'">'+ _w+'x'+ _h+'</div>');
this.ui.selection.find('.jcrop-tracker').empty().append(_info);
}
}, function() {
jcrop_api = this;
});
};
var removeImgAreaSelect = function() {
jcrop_api.destroy();
};
var resetAfterSaveAndCancel = function() {
/* Make sure we can upload the most recent image. Because on change just occur when you upload another image */
$(_apl_file_upload_sel)[0].value= ''; /* reset */
want_size_w = 0;
want_size_h = 0;
want_pos_x = 0;
want_pos_y = 0;
removeImgAreaSelect();
/* hiddenUploadBar(); */
};
var showWhenCancel = function() {
$upload_container_sel.removeClass('hidden');
$crop_contianer_sel.addClass('hidden');
$primary_img_sel.attr('src', '');
}
/*cancel-crop*/
$(document).on('click',cancel_drop_sel, function (event) {
showWhenCancel();
$.ajax({
url: APL.ajax_url,
data: {
action: 'apollo_add_event_remove_old_pimage'
},
beforeSend: function() {
$block_container.block(_blockUI);
},
success: function(resp) {
},
complete: function() {
resetAfterSaveAndCancel();
$block_container.unblock();
}
});
});
/* save-crop */
$(document).on('click',save_drop_sel, function (event) {
if(want_size_h === 0 || want_size_w === 0) {
alert($.apl.__('Please select area to drop'));
return false; /* Do nothing */
}
if(want_size_h < min_size_h) {
alert($.apl.__('Image\'s height must larger than: ' + min_size_h + 'px'));
return false;
}
if(want_size_w < min_size_w) {
alert($.apl.__('Image\'s width must larger than: ' + min_size_w + 'px'));
return false;
}
/* Render ajax to server and get response */
$.ajax({
url: APL.ajax_url,
data: {
action: 'apollo_add_event_drop_pimage',
history: JSON.stringify(
[{"c":{"x":want_pos_x,"y":want_pos_y,"w":want_size_w,"h":want_size_h}}]
)
},
beforeSend: function( ) {
$block_container.block(_blockUI);
},
success: function(resp) {
$primary_img_sel.attr('src', resp.data.file.url + '?t=' + new Date().getTime());
$primary_img_sel.attr('data-o_width', resp.data.file.meta.width);
$primary_img_sel.attr('data-o_height', resp.data.file.meta.height);
},
complete: function() {
resetAfterSaveAndCancel();
$block_container.unblock();
}
});
});
/* when click upload */
$("#_apl_file_upload").on('change', function(event) {
if(this.files.length > 0) {
/* Form you want to sumbmit */
$main_form_step1_id.submit();
}
});
};
/* Handle primary image upload */
handle_primary_image_add_event();
/* END ALL SOURCE */