Итак, я делаю веб-приложение, где пользователи должны иметь возможность загрузить изображение и обрезать его:
<img>
<img>
Примечание: код упрощен
jQuery('#my_upload_input').change(function(my_event)
{
my_load_image(my_event.currentTarget.files);
});
jQuery(document).keyup(function(my_event)
{
if (my_event.which == 13)
{
my_crop_image();
}
});
var my_file_glob;
var my_image_glob;
var my_jcrop_api_glob;
function my_load_image(my_files)
{
var my_file_glob = my_files[0];
var my_image_glob = new Image();
my_image_glob.onload = function()
{
my_show_image();
};
my_image_glob.src = URL.createObjectURL(my_file_glob);
}
function my_show_image()
{
jQuery('#my_container').html('<img id="my_img" src="' + my_image_glob.src + '" />');
jQuery('#my_img').Jcrop(
{
boxWidth: 1280,
boxHeight: 720,
trueSize: [my_image_glob.width, my_image_glob.height],
setSelect: [0, 0, 1920, 1080],
aspectRatio: 1920 / 1080,
minSize: [1920, 1080],
bgColor: '',
allowSelect: false
}, function()
{
my_jcrop_api_glob = this;
});
}
function my_crop_image()
{
if (typeof my_jcrop_api_glob !== 'undefined')
{
var my_selection = my_jcrop_api_glob.tellSelect();
var my_canvas = document.createElement('canvas');
var my_canvas_context = my_canvas.getContext('2d');
my_canvas.width = my_selection.w;
my_canvas.height = my_selection.h;
my_canvas_context.drawImage(my_image_glob, my_selection.x, my_selection.y, my_selection.w, my_selection.h, 0, 0, my_selection.w, my_selection.h);
my_upload_canvas(my_canvas);
}
}
function my_upload_canvas(my_canvas)
{
var my_canvas_url = my_canvas.toDataURL('image/png');
jQuery.ajax(
{
type: 'POST',
url: 'ajax_calls.php',
data:
{
my_canvas_url: my_canvas_url
},
success: function(my_response)
{
alert(my_response);
window.location.reload(true);
}
});
}
if(isset($_POST['my_canvas_url']))
{
$my_canvas_url = $_POST['my_canvas_url'];
my_upload_canvas($my_canvas_url);
}
function my_upload_canvas($my_canvas_url)
{
$my_canvas_data_enc = explode(',', $my_canvas_url)[1];
$my_canvas_data_enc = str_replace(' ', '+', $my_canvas_data_enc);
$my_canvas_data_dec = base64_decode($my_canvas_data_enc);
file_put_contents(dirname(__FILE__) . '/menu.png', $my_canvas_data_dec);
if($my_png_created !== false)
{
echo 'success';
}
else
{
echo 'failure';
}
}
В функции my_upload_canvas(my_canvas)
Я написал эти несколько строк, чтобы сравнить размер исходного изображения и обрезанную область:
var head = 'data:image/png;base64,';
var imgfilesize = Math.round((my_canvas_url.length - head.length) * 3 / 4);
console.log('size orig: ' + Math.round(my_file_glob.size));
console.log('size crop: ' + Math.round(imgfilesize));
console.log('cropped area is ' + Math.round(imgfilesize / my_file_glob.size) + ' times bigger than the original image');
Выводы для трех разных изображений следующие:
JPEG (807 КБ)
size orig: 826730
size crop: 2445081
cropped area is 3 times bigger than the original image
JPG (141 КБ)
size orig: 144837
size crop: 1201146
cropped area is 8 times bigger than the original image
PNG (334 КБ)
size orig: 342617
size crop: 53799
cropped area is 0 times bigger than the original image
Обратите внимание, что размеры обрезанных областей изображения № 1 и № 2 больше, чем размеры самих исходных изображений, но не для изображения № 3.
500 — внутренняя ошибка сервера был вызван $
перед функцией plugins_url()
…дурак я. Но, к сожалению, сохранение .png все равно не будет работать (я даже не могу создать файл). Введение и обновление кода.
Загрузка изображения работает сейчас! Я заменил
file_put_contents(plugins_url('/menu.png', __FILE__), $my_canvas_data_dec)
с
file_put_contents(dirname(__FILE__) . '/menu.png', $my_canvas_data_dec)
поскольку, очевидно, URL не будет работать, но полный путь будет. Введение и обновление кода.
Тайна разгадана! Как ты можешь читать Вот, холст содержит не больше информации, чем пиксели изображения. Поэтому размер URL-адреса данных зависит от того, как браузер кодирует эти пиксели, и может привести к тому, что он будет больше, чем изображение. Кроме того, PNG в большинстве случаев будет намного больше, чем JPEG того же холста.
Я понял это сам. Пожалуйста, посмотрите обновления моего поста, если вам интересны ответы.
Других решений пока нет …