web前台图片动态组合

前端的话，html5支持画板，可以试试。
具体你百度一下。

解决方案 »

  1.   

    HTML5 的 js 具有画布功能了。http://www.w3school.com.cn/html5/html_5_canvas.asp
      

  2.   

    思路：
    每个道具一个div，div设置可以拖动的。推荐个插件jqdnr：http://blog.csdn.net/withiter/article/details/7239378，原始的js有点问题，我修改了源码，你可以参考使用我这个：http://blog.csdn.net/withiter/article/details/8010253拖动的过程中计算div的中心点得top/left值，如果几个都在同一高度/宽度则表示在同一直线。下面就是生成你当前页面的图片，用这个：http://html2canvas.hertzen.com/测试代码：<!DOCTYPE html>
    <html>
        <head>
            <meta name="layout" content="main">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
            <script type="text/javascript" src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
             
            <script  type="text/javascript" >
            $(document).ready( function(){
                    $(".example1").on("click", function(event) {
                            event.preventDefault();
                            html2canvas(document.body, {
                            allowTaint: true,
                            taintTest: false,
                            onrendered: function(canvas) {
                                canvas.id = "mycanvas";
                                //document.body.appendChild(canvas);
                                //生成base64图片数据
                                var dataUrl = canvas.toDataURL();
                                var newImg = document.createElement("img");
                                newImg.src =  dataUrl;
                                document.body.appendChild(newImg);
                            }
                        });
                    }); 
                 
            });
             
            </script>
        </head>
        <body>
             
            Hello!
            <div class="" style="background-color: #abc;">
                计算机天堂测试html5页面截图
                <br>jsjtt.com
            </div>
             
            <textArea id="textArea" col="20" rows="10" ></textArea>
            <input class="example1" type="button" value="button">
            生成界面如下：
        </body>
    </html>
      

  3.   


    如果不支持HTML5
    不知道flash可以实现不！