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

Question

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

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

更新我正在分享用户将要执行的调整大小、移动和裁剪图像的步骤。

第 1 步：用户通过单击某些 UI 来加载框架，它会打开一个弹出窗口，其工作区域为 432 像素 x 348 像素。框架是具有透明中心和外边缘的 PNG。在该窗口上将是用户上传图像的区域。正如您在图 1 中看到的，图像以 100% 的速度加载并通过窗口。用户可以选择移动图像并裁剪或移动到第 2 步。

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

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

第四步：这是数据发送到服务器进行处理后的最终结果。

Answer 1

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

为了向您的应用程序添加图像上传功能，请在此处查看答案：将照片上传到 MVC 4 应用程序。

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

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

如果您需要有关代码的帮助，请告诉我。