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>