0

我的朋友要我为他开发一个面饼面包店的网站。我应该为用户提供一个表格，以便他们可以订购蛋糕并提交要打印在蛋糕上的照片。现在我需要制作一个动态成像系统，用用户提交的图像显示蛋糕的外观预览..如果您能建议一些图书馆这样做，那将非常有帮助。

4

2 回答 2

1

听起来您正在尝试做两件事：

  1. 在客户端显示用户选择的照片（在它进入服务器之前）。
  2. 转换该图像，使其出现在蛋糕上的正确位置。

这两个功能传统上属于后端处理领域，但由于 HTML5 和 CSS3 草案标准，它们至少在 Chrome 和 Firefox 中可用。以下解决方案并不通用，对于不支持的浏览器，您将不得不退回到基于服务器的解决方案，但值得一提的是：

显示用户选择的图像

当用户从中选择一个文件时<input type=file>，它会调度一个change事件。发生这种情况时，DOM 对象有一个FileList名为的属性，files允许您读取这些文件的内容。 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 3d 变换可以将表面变换为 3D。我进行了实验，发现以下内容非常有说服力。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/

于 2012-07-08T14:41:35.920 回答
0

您可以使用绝对定位和 3d 变换 css、带有溢出隐藏且背景无的边界半径圆和图像作为带有圆形蛋糕的子元素。

就是这样。

于 2012-07-08T07:06:47.463 回答