将图像拖动到另一个图像上，并将其保存到一个图像（如光增强现实） [英] Drag an image on another image and save it to one image (like light augmented reality)

问题描述

我想知道如何才能实现？我想在后台有一个更大的图像，并能够将一个较小的图像拖放到我想要的更大图像上的位置，并最终保存，所以它成为一个。

< p> html5？

欣赏任何想法！

谢谢

解决方案

为了拖动一个放置部分，您只需将一个图像放在另一个图像的顶部，并给它一些alpha值，使其变为半透明：

  #dragme {
 opacity：0.4; 
} 
  

可以使用jquery-ui进行拖放： p>

  $（＃dragme）。draggable（）; 
  

尝试：

< a href =http://jsfiddle.net/bjelline/k3vaX/ =nofollow> http://jsfiddle.net/bjelline/k3vaX/

如果要实际合并两个图像以创建新的
，请使用图像处理库，如pixatastic http://www.pixastic.com/lib/docs/actions/blend/

i´m wondering how can i realize this? I want to have an bigger image in the background and be able to drag and drop a smaller image to the position i want on the bigger image and save it finally, so it becomes one.

Is this possible with javascript & html5?

appreciate any ideas!

thanks

解决方案

For the drag an drop part you can just position one image on top of the other and give it some alpha-value to make it half-transparent:

#dragme {
    opacity:0.4;
}

the drag-and-drop you can do with jquery-ui:

$("#dragme").draggable();

try it out at:

http://jsfiddle.net/bjelline/k3vaX/

If you want to actually merge the two images to create a new one use an image processing library, like pixatastic http://www.pixastic.com/lib/docs/actions/blend/

这篇关于将图像拖动到另一个图像上，并将其保存到一个图像（如光增强现实）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！