Используйте лицо с картинки для открытки (см. Скриншот) - PullRequest
Новая
       14

Используйте лицо с картинки для открытки (см. Скриншот)

0 голосов
/ 04 июля 2010

Я собираюсь создать приложение, похожее на santayourself (приложение facebook), снимок экрана ниже alt text

Приложение примет фотографию, а затем пользователи смогут перемещать ее с помощью элементов управления для увеличения, поворота и перемещенияизображение вправо, влево, вверх и вниз.Затем, когда лицо станет таким, как требуется, пользователь может нажать «Сохранить», чтобы сохранить изображение на сервере (php, apache, linux).

Есть какие-либо рекомендации о том, как поступить с этим проектом?Я думаю, решение Javascript будет лучше.Любые предложения приветствуются.

Ответы [ 3 ]

2 голосов
/ 04 июля 2010

javascript И php GD-библиотека сделают это - большинство описанных выше вещей может быть выполнено одним javascript. Самый быстрый способ сделать это - сделать маску Санта-Клауса с прозрачным png, абсолютно помещенным над минимально размещенной клиентской фотографией, которая, однако, помещается в div такого же размера, что и маска с переполнением, установленным в значение hidden Поскольку клиентское изображение является абсолютным внутри div, его можно перемещать, и пользователь может манипулировать его размером с помощью некоторого механизма, как показано выше. Тем не менее, ротация будет сучкой, и здесь вам придется использовать php gd-library или image majik (лично я бы сбросил ротацию). Это простая работа, но трудоемкая - пользовательский интерфейс для манипулирования изображениями сложен. Если выходные данные для этого предназначены для печати с экрана, я не буду беспокоиться о дальнейших манипуляциях на стороне сервера, а просто сохраню изображение, чтобы замаскировать позиционные отношения (1/2 kb) данных ...

1 голос
/ 05 июля 2010

Взгляните на библиотеку jCrop (jQuery), вы можете настроить ее так, чтобы делать то, что вы хотите.
http://deepliquid.com/content/Jcrop.html (они, очевидно, предоставляют несколько демонстраций)

1 голос
/ 04 июля 2010

да. javascript - это способ интерактивных вещей, подобных этому. Я вижу, что это легко сделать с помощью простого скрипта и некоторых PNG (хотя вам, возможно, придется сделать что-то творческое для ротации). PHP будет нужен только для сохранения.

РЕДАКТИРОВАТЬ: На самом деле, теперь, когда я думаю об этом, подход холст HTML 5 будет лучше. Он имеет множество методов преобразования и манипулирования пикселями, и даже может сохранить изображение на стороне клиента! Помните, что HTML 5 поддерживается не во всех браузерах (в основном во всех, кроме IE). ( HTML 5 Canvas Spec )

Метод drawImage - это то, что вы ищете: (Цитата из спецификации) 

void drawImage(in HTMLImageElement image, in float dx, in float dy, in optional float dw, in float dh);


Итак, ваш HTML будет иметь элемент canvas, который рисует картинку пользователя: 

<canvas id="canvasElement" width="xx px" height="xx px">
<!-- What to display in browsers that don't support canvas -->
<p>Your browser doesn't support canvas</p>
</canvas>

Тогда ваш javascript: 

var view;
var context;

var userPhoto=new Image;
userPhoto.src="uploaded.jpg";

// Update these with UI settings
var position = {x:x, y:y};
var scale;
var rotation;

function init() {
    // Run this once at the loading of your page

    view = document.getElementById("canvasElement");
    context = view.getContext("2d");
}

function update() {
    // Run this every time you want the picture size, position, rotation updated

    context.clearRect(0, 0, view.width, view.height);

    // Scale X and Y
    context.scale( scale, scale );
    // Rotate (convert degrees to radians)
    context.rotate( rotation / 3.14159 * 180 )

    // Draw the image at X and Y
    context.drawImage( userPhoto, position.x, position.y )
}

HTML 5 Canvas очень мощный, поэтому вы можете сделать множество других вещей с вашим изображением, если вы пойдете в этом направлении. Однако, другим жизнеспособным решением было бы использовать Flash, который поддерживается везде - но я рекомендую HTML 5, поскольку это путь будущего ( Стив Джобс: Мысли о Flash ).

...