html 手机端 生成海报

1、使用phaser世界生成img 然后保存img在某个div中，长按这个div就会生成海报（其实就是图片的保存，只是因为h5中的背景啊、文字啊需要根据选择来显示，所以就是定制生成图片也就是海报了）

<style>
 #poster{width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;display: none;}
  #poster img:nth-of-type(3){  position: absolute; width: 100vw; height: 100vh;top: 0; left: 0;
            /*opacity: 0;*/
           }
</style>
<section id="poster" class="hide">
    <div style="position: absolute; width: 3rem; background: rgba(0,0,0,0.6);color: #fff; text-align: center; line-height: 3rem;font-size: 2rem;right: 0; top: 0;z-index: 9;">长按屏幕保存或分享海报</div>
</section>
<section id="part_11" style="display: none;"></section>

<script type="text/javascript" src="/static/phaser.min.js"></script>

<script>
var words = {
        \'word0\':[\'我爱你\',\'执笔写你 \',\'落笔想你 \'],
        \'word1\':[\'我爱你\',\'你养我长大\',\'我陪你变老\'],
        \'word2\':[\'我爱你\',\'愿你芳华自在\',\'愿你笑靥如花\'],
        \'word3\':[\'我爱你\',\'比昨天多一点\',\'比明天少一点\'],
    };
    var choseWord = 0;
    var choseFlower = 0;
function createPoster(){
　　　　//需要引入 phaser 插件
        var game = new Phaser.Game(1000,1594,Phaser.CANVAS,\'part_11\'); //页面元素 id=part_11 1000 1594 为画布大小
        var isrender = false;
        game.States = {};
        game.States.boot = function(){
            this.preload = function(){
                game.load.image(\'bg\',\'/static/womenDay/images/poster_bg_\'+(choseFlower+1)+\'.jpg?v2\'); //预加载图片
                game.load.image(\'word\',\'/static/womenDay/images/new_word_\'+(choseWord+1)+\'.png?v1\');
            }
            this.create = function(){
                game.state.start(\'main\');
            }
        }

        game.States.main = function(){
            this.create = function(){
                game.add.image(0, 0, \'bg\',null); 
                game.add.image(0, 0, \'word\',null);
                 var wordData = words[\'word\'+choseWord];

                 var i = 0;
                 game.add.text(380, 813, wordData[i], {font: \'50px 楷体\',letterSpacing:\'16px\',fontWeight:\'normal\'});//生成文字 x=380 y = 813
                 i++;
                 game.add.text(choseWord==0 ? 348:333, 915, wordData[i], {font: \'50px 楷体\',letterSpacing:\'16px\',fontWeight:\'normal\'});
                 i++;
                 game.add.text(choseWord==0 ? 348:333, 1025, wordData[i], {font: \'50px 楷体\',letterSpacing:\'16px\',fontWeight:\'normal\'});


            }
            this.render = function(){ //渲染完成后
                if(!isrender){
                    isrender = true;
                    var resultCanvas = document.getElementById(\'part_11\').getElementsByTagName("canvas")[0];
                    var _resultimg = resultCanvas.toDataURL("image/jpeg"); //生成海报
                    var img=document.createElement("img");
                    img.src = _resultimg;
                    document.getElementById(\'poster\').appendChild(img);
　　　　　　　　　　　　$("#poster").show();
   　　                //poster 为页面元素 id 

　　　　　　　　　　　　

                }
            };
        }
        game.state.add(\'boot\',game.States.boot);
        game.state.add(\'main\',game.States.main);
        game.state.start(\'boot\');

    }
    
    </script>