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 >长按屏幕保存或分享海报</div> </section>
<section id="part_11" ></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');
}
game.state.start('main');
}
}
game.States.main = function(){
game.add.image(0, 0, 'bg',null);
game.add.image(0, 0, 'word',null);
var wordData = words['word'+choseWord];
var i = 0;
(380, 813, wordData[i], {font: '50px 楷体',letterSpacing:'16px',fontWeight:'normal'});//⽣成⽂字 x=380 y = 813
i++;
(choseWord==0 ? 348:333, 915, wordData[i], {font: '50px 楷体',letterSpacing:'16px',fontWeight:'normal'});
i++;
(choseWord==0 ? 348:333, 1025, wordData[i], {font: '50px 楷体',letterSpacing:'16px',fontWeight:'normal'});
}
if(!isrender){
html手机网站isrender = true;
var resultCanvas = ElementById('part_11').getElementsByTagName("canvas")[0];
var _resultimg = DataURL("image/jpeg"); //⽣成海报
var ateElement("img");
img.src = _resultimg;
            $("#poster").show();
  //poster 为页⾯元素 id
}
};
}
game.state.add('boot',game.States.boot);
game.state.add('main',game.States.main);
game.state.start('boot');
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。