我的朋友想让我为他开发一个面饼面包店的网站。我应该为用户提供一个表格，这样他们就可以订购蛋糕并提交照片打印在蛋糕上。现在我需要制作一个动态成像系统，显示用户提交图像后蛋糕的预览。。如果你能建议一些库这样做，那将是非常有帮助的。
听起来你想做两件事：
- 在客户端显示用户选择的照片（在照片转到服务器之前）
- 变换该图像，使其显示在蛋糕上的正确位置
这两个功能传统上都属于后端处理领域，但由于HTML5和CSS3草案标准，它们至少在Chrome和Firefox中可用。以下解决方案并不通用，您将不得不为不支持的浏览器使用基于服务器的解决方案，但值得一提的是：
显示用户选择的图像
当用户从<input type=file>中选择一个文件时，它会分派一个change事件。当这种情况发生时，DOM对象有一个名为files的FileList属性，允许您读取这些文件的内容。URL.createObjectURL允许您将文件转换为可用于图像源的URL：
input.addEventListener('change', function () {
preview.src = URL.createObjectURL(this.files[0]);
});
preview.addEventListener('load', function () {
URL.revokeObjectURL(this.src);
});
请参阅http://jsfiddle.net/bnickel/yP7Bb/进行演示。
转换为蛋糕顶部
CSS3三维变换可以将曲面变换为三维。我进行了实验，发现以下内容非常有说服力。0.7垂直压缩，-0.008是一个增加透视的旋转。
-webkit-transform: matrix3d(1, 0, 0, 0,
0, 0.7, 0, -0.008,
0, 0, 1, 0,
0, 0, 0, 1);
transform: matrix3d(1, 0, 0, 0,
0, 0.7, 0, -0.008,
0, 0, 1, 0,
0, 0, 0, 1);
transform: matrix3d(1, 0, 0, 0,
0, 0.7, 0, -0.008,
0, 0, 1, 0,
0, 0, 0, 1);
您可以在此处使用价值观：http://jsfiddle.net/bnickel/v9Jat/
您可以使用绝对定位和3d转换css，边界半径圆与过流隐藏背景无，图像作为子元素与圆形蛋糕。
仅此而已。