使用.Net和Javascript以PNG作为掩码覆盖图像

Question

我正在处理一个项目，用户可以在其中上传PNG格式的帧图像。在他们上传框架后，他们可以上传将放置在框架后面的照片。照片可以调整大小并移动，以便他们可以将照片放入框架中。一旦他们对自己的工作感到满意，他们就可以保存自己的工作。

画布在客户端上是固定大小的。这是一个ASP.Net MVC4应用程序，我们正在使用JavaScript / JQuery。我只对System.Drawing库做了一点工作，但还不确定它们是如何组合在一起的。如果只使用.Net和JavaScript / JQuery就可以轻松完成，但我并不反对使用第三方.Net库和JavaScript / JQuery。

UPDATE 我是goign，分享用户将调整大小，移动和裁剪图像的步骤。

步骤1：用户通过单击某个UI加载框架，然后打开一个工作区域为432px x 348px的弹出窗口。框架是PNG，具有透明的中心和外边缘。在该窗口上将是用户上载图像的区域。如图1所示，图像以100％加载并经过窗口。用户可以选择移动图像并裁剪或移动到第2步。

步骤2：用户将移动图像以找到手柄，以便他们可以调整图像大小。他们可以选择在此时进行裁剪而不调整大小，或者转到第3步。

步骤3：用户将调整图像大小并将其移动到位。完成后，他们将裁剪上传的图像。

步骤4：这是将数据发送到要处理的服务器后的最终结果。

Answer 1

它可以在纯.NET中完成。不需要使用其他库。

要向您的应用添加图片上传功能，请在此处查看答案：Upload Photo To MVC 4 Applications。

如果您使用带有透明度支持的 png 格式的图片上传图像，您应该能够在另一个图像上绘制一个图像，就像这里的示例代码一样（使用gif）那里）：http://www.daniweb.com/web-development/aspnet/threads/112667/how-to-overlay-two-images-in-c。

您还可以支持其他格式的帧（例如 jpg 或 bmp ），但是，为了支持这种情况，您应该手动选择要绘制的像素原始图像。其中一个最简单的解决方案是将其中一种颜色设置为透明度键，因此当像素采用此颜色时，不会在结果图像中绘制。您可以选择鲜艳的粉红色或其他很少使用的颜色（甚至允许用户选择它）。它仍然不是很复杂，购买它需要更多的代码，一些额外的工作使它快速和一个阈值，以检测相似的像素，以防帧质图像质量差。

如果您需要有关代码的帮助，请与我们联系。