Я знаю, что есть тысячи плагинов jQuery для обрезки изображения, но тот, который мне нужен, похож на обложку изображения Facebook: перетаскиваемый фиксированный размер квадрата над изображением или перетаскиваемое изображение под квадратом фиксированного размера.
Я думаю, там простой элегантный код для него, а не 10k-50k рамки для манипуляций с изображениями, которые я нахожу везде.
Я просто построил вам быстрый пример того, как это сделать с помощью jQuery: http://jsfiddle.net/gCqJ4/ Это не слишком сложно, и вы можете построить мой пример. Лицензия - MIT.
Здесь делается фундаментальное предположение. Во-первых, ваше изображение, как ожидается, уже было загружено; это только часть урожая. Во-вторых, изображение имеет атрибут идентификатора данных, который указывает идентификатор изображения, которое может использовать сервер.
Я объясню JS немного ниже:
Первая часть - это ваше типичное объявление плагина jQuery:
(function($) {
$.fn.croppable = function(settings) {
Затем мы берем необязательный аргумент настроек с некоторыми стандартными значениями по умолчанию (успех является вашей анонимной функцией для обработки успешных представлений данных):
settings = settings || {
square: 50,
default: 'middle',
id: $(this).data("id"),
success: null
};
Далее - это просто базовый расчет начального положения.
var position = {
x: settings.default == 'middle' ? ($(this).width() / 2) - (settings.square / 2) : 0 ,
y: settings.default == 'middle' ? ($(this).height() / 2) - (settings.square / 2) : 0
};
Мы обертываем изображение в контейнер, который можно стилизовать и использовать в качестве родительской оболочки для перетаскиваемого обрезчика.
$(this).wrap("<div class='croppable-container' style='position: relative;' />");
Это (очевидно) обрезчик.
var cropper = $("<div style='position: absolute; top: " + position.y + "px; left: " + position.x + "px; height: " + settings.square + "px; width: " + settings.square + "px;' class='cropper' />");
Поместите его перед изображением:
$(this).before(cropper);
Создайте базовую кнопку сохранения:
var save = $("<input type='button' value='Crop Selection'/>");
И привяжите его к службе, чтобы получать сообщения для обрезки:
save.click(function () {
$.post("/your/service/location",
{
img: id,
x: cropper.position().left,
y: cropper.position().top,
height: settings.square
},
function (data) {
if (settings.success != null) {
settings.success(data);
}
}
);
});
$(this).parent().width($(this).width());
$(this).parent().height($(this).height());
cropper.draggable({containment: "parent"});
$(this).parent().after(save);
Конец типичного объявления плагина:
};
})(jQuery);
Назовите его:
$(".croppable").croppable();
Как последнее замечание, сам плагин составляет всего 1,61 КБ. Достаточно ли достаточно?
Я использую imgAreaSelect. Это отличный инструмент и очень простые входы и выходы...
Разработать:
Вы можете установить ширину, высоту и установить для параметра "resizable" значение false, чтобы позволить пользователю выбрать конкретный квадрат (хотя обычно я предоставляю пользователям больше свободы и обрезает изображение, когда они выбирают другой размер - только для обеспечения соблюдения аспектный рацион.
Конечно, это 35Kb, которое может быть уменьшено до < 14kb. Если вы хотите его уменьшить, я бы предложил удалить некоторые из функций, которые вам не нужны, прежде чем вы его уменьшите.
Существует много плагинов jQuery для обрезки на стороне клиента (jCrop, imgAreaSelect и т.д.). Возможно, вы найдете следующее сообщение в блоге полезным. Он описывает решение для фактического обрезки на сервере при интеграции с библиотеками Javascript:
http://cloudinary.com/blog/cloudinary_as_the_server_side_for_javascript_image_cropping_libraries