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

时间:2014-05-27 08:11:06

标签: php html5 image image-processing canvas

有没有人知道会让我将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?

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

1 个答案:

答案 0 :(得分:0)

您可以使用以下库:

我还使用canvas创建了一个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小提琴中检查效果:http://jsfiddle.net/T364V/1/ 如果要更改不透明度,则应更改context.globalAlpha的值。

图像处理: