使用lufylegend.js 生成图片并保存图片

js 引入

<script type="text/javascript" src="js/lufylegend/lufylegend-1.10.1.min.js"></script>

html

<div id="legend"></div>

<img src="" alt="" class="photo_img">

 

 

//注意保存图片所用到的资源 必须是同域下面的，不能使用跨域资源

//初始化必不可少

init(30, "legend", 750, 1464, main);

//需要插入的资源元素 

//这里就保存个二维码  文字  背景图

var imgData = [

{

name: 'bg',

path: 'images/bg.jpg',

},

{

name: 'code',

path: 'images/code.png',

},

]

//这里二维码要是动态的，就需要生成之后放在跟html同域下的目录，比如通过后台ajax请求了一张图

 //加载游戏 
  function main() {

    //Loading管理
    //loadingLayer = new LoadingSample6();
    //addChild(loadingLayer);//框架自带的loading条，可自行选择

    //图片资源加载器
    LLoadManage.load(imgData, function (progress) {
      //图片进度处理
      //loadingLayer.setProgress(progress);

    }, function (result) {
      imglist = result;

      // removeChild(loadingLayer);
      // loadingLayer = null;

      gameinit();
    });
  }

function gameinit(){
    //底层
        //创建一个新的 LSprite 实例。 LSprite 类是基本显示列表构造块：一个可显示图形并且也可包含子项的显示列表节点。
        backLayer = new LSprite();
        addChild(backLayer);
        //需要注意的一点是，在地下的要在codes = new LSprite();
          bg.x = 0;
          bg.y = 0;
          bg.visible = true;
          bg.addChild(new LBitmap(new LBitmapData(imglist['bg'])));
          backLayer.addChild(bg);添加

          codes = new LSprite();
          codes.x = 75;
          codes.y = 750;
          codes.visible = true;
          codes.addChild(new LBitmap(new LBitmapData(imglist['code'])));
          bg.addChild(codes);

          var input_val = $('#input').val();//假如需要获取input的值
          timeField = new LTextField();
          timeField.x = 100;
          timeField.y = 680;
          timeField.size = 28;
          timeField.visible = true;
          timeField.color = "#11fffb";
          timeField.text = input_val;
          bg.addChild(input_val);
          
          save_btn = new LSprite();
          save_btn.x = 300;
          save_btn.y = 750;
          save_btn.visible = true;
          save_btn.addChild(new LBitmap(new LBitmapData(imglist['save_btn'])));
          bg.addChild(save_btn);
          save_btn.addEventListener(LMouseEvent.MOUSE_DOWN, save_img);
}

function save_img() {
    save_btn.visible = false;//隐藏掉保存按钮
    setTimeout(function () {
      var sharepic = LGlobal.canvasObj.toDataURL("image/png");
      $(".photo_img").attr("src", sharepic);
      $('#legend').hide();
      $(".photo_img").css({
        "width": $(window).width() ,
        "height": $(window).height(),
      });
      $('.photo_img').show();
    }, 600)
  }