使用图像中的面部作明信片（见截图）

Question

我正在寻找一个类似于santayourself（facebook应用程序）的应用程序，下面是截图

应用程序将接受照片，然后用户可以使用控件进行缩放和旋转，并向右，向左，向上和向下移动图像。然后，一旦面部按需要，用户可以单击保存将图像保存在服务器上（php，apache，linux）。

有关如何进行此项目的任何建议？我想javascript解决方案会更好。欢迎任何建议。

Answer 1

javascript和php GD-library会做到这一点 - 上面介绍的大部分内容都可以通过javascript单独完成。实现这一目标的最快方法是将圣诞老人面具完全放置在一个透明的png上，该png绝对放置在一个放置在simalarly上的客户端照片上，然而该照片放置在与溢出设置为隐藏的掩码大小相同的div中。由于客户端phot在div内是绝对的，因此它可以被移动并且其大小可以由用户通过如上所示的某种机制来操纵。但是 - 旋转将是一个婊子，在这里你将不得不使用php gd-library或image majik（我个人会转储旋转）。这是一个简单的工作，但耗时 - 图像处理的用户界面是棘手的。如果这个输出是用于从屏幕打印的话，我不打扰进一步的服务器端操作，而只是存储图像来掩盖数据的位置关系（1/2 kb）......

Answer 2

是的。 javascript是这样的交互式事物的方式。我可以通过一个简单的脚本和一些PNG轻松地看到这一点（尽管你可能需要为旋转做一些有创意的事情）。 PHP只需要保存。

编辑：实际上，现在我想起来了，HTML 5 canvas方法最好。它有很多转换和像素处理方法，甚至可以保存客户端的图像！请记住，虽然所有浏览器都不支持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 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非常强大，所以如果你朝这个方向发展，你可以对你的图像做很多其他事情。然而，另一个可行的解决方案是使用闪存，它在任何地方都得到支持 - 但我推荐HTML 5，因为它是未来的方式（Steve Jobs: Thoughts on Flash）。

Answer 3

看看jCrop库（jQuery），你可以调整它以完成你想做的事情。
http://deepliquid.com/content/Jcrop.html （他们显然提供了一些演示）