如何合并图像和最终图像应该看起来像真实的答案

【问题标题】：How to Merge image and final image should look like real如何合并图像和最终图像应该看起来像真实的
【发布时间】：2014-07-16 01:25:30
【问题描述】：

有谁知道可以让我将 jpg 图像上传到画布图像（大背景图像）的产品。移动、调整大小、选择边框，然后将所有内容保存到一张合并的图像中最终图像应该看起来像真实图像？

我做了很多研究 Drag an image on another image and save it to one image (like light augmented reality) Blend two images with pixastic does not work. How to get the new image?

但没有找到确切的解决方案？有什么想法吗？

【问题讨论】：

标签： php html image image-processing canvas

【解决方案1】：

您可以使用以下库：

Pixastic：http://www.pixastic.com/lib/docs/actions/blend/

我还使用画布创建了一个 HTML5 版本的 Pixastic 效果：

HTML：

<canvas id="myCanvas" width="578" height="400"></canvas>

JS：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.globalAlpha=0.5;

// Image 1
var imageObj1 = new Image();
imageObj1.onload = function() {
    context.drawImage(imageObj1, 0, 0);
};
imageObj1.src = 'http://www.pixastic.com/sample/Flower.jpg';

// Image 2
var imageObj2 = new Image();
imageObj2.onload = function() {
    context.drawImage(imageObj2, 0, 0);
};
imageObj2.src = 'http://www.pixastic.com/sample/Butterfly.jpg';

可以在 JS Fiddle 中查看效果：http://jsfiddle.net/T364V/1/ 如果你想改变不透明度，你应该改变context.globalAlpha的值。

图像处理：

FabricJS：http://fabricjs.com/demos/
JS 操作：http://joelb.me/jsmanipulate/

【讨论】：

感谢您的帮助。我的问题是我有像screencast.com/t/Vlrn1ZHNPGC 这样的墙壁/房间图像。用户可以选择任何加热器图像，并使用拖放操作将它们放置在墙上的任何位置。最后他们可以下载合并的图像。它应该合并acc。背景给它一个真正的效果。在画布上可以吗？
使用画布可以玩转 2D 和 3D 效果。您还可以使用画布处理拖放效果。有很多教程可以帮助你。基本上，您需要画布中的背景图像，并且您需要能够在画布中拖放另一个图像。可拖动的图像可能应该具有“旋转”功能。
:- 是的，没关系。我可以轻松地创建它。我唯一担心的是图像如何完全融合在背景图像上以赋予其真实效果。请看下面的图片image1 image2这可能吗？
“完全合并”是不可能的。这是 2 个不同的图像。可能有不同的调色板。在您的项目中，您需要能够旋转图像并四处移动它。如果用户要旋转和移动图像，您可以固定预定义的值，图像可以放置在任何地方（墙上、地板上等）。在我看来，您应该有一个 2D 图像（包含墙壁和当前图片中的所有对象），并且您将在此图像上放置加热器。
另外，您可以将 2D 图像一分为二。您将为屏幕上的所有元素（墙除外）提供一个背景图像，而墙则为另一个。您将使用 jQuery Draggable 和 Droppable 允许加热器图像仅放置在墙壁图像（墙壁容器）上。这真的很容易做到。