// 点击生成海报
$(document).on('click','.posterBtn',function (){
    //海报背景图设置高
    var hei = $(".poster_bj").height()
    $("#capture").css('height',hei+'px')
    //默认选取第一张
    $('.poster_swiper ul li .choseImg').hide()
    $('.poster_swiper ul li').eq(0).find(".choseImg").show();
    var getPic =$('.poster_swiper ul li').eq(0).attr("pic")
    $(".poster_bj").attr("src",getPic)
    //图片base64
    var getImg = $(".poster_tx img").attr("src")
    var image = new Image();
    image.src = getImg + "?v=" + Math.random(); // 处理缓存
    image.crossOrigin = "*"; // 支持跨域图片
    image.onload = function(){
        var base64 = getBase64Image(image);
        $('.poster_tx img').attr("src",base64)
        // 调用html2canvas插件
        getPoster();
    }
});
$(document).on("click",'.poster_swiper ul li',function (){
    $('.poster_swiper ul li .choseImg').hide()
    $(this).find(".choseImg").show();
    var getPic =$(this).attr("pic")
    $(".poster_bj").attr("src",getPic)
    // 调用html2canvas插件
    getPoster();
})
$(document).on("click",'.poster_close',function (){
    var hideImg = $(".hideImg").attr("src");
    $(".poster_tx img").attr("src",hideImg);
    $(".posterbox").hide();
})
function getPoster(){
    html2canvas(document.querySelector("#capture")).then(function(canvas) {
        // canvas宽度高度
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        // 转成图片调用Canvas2Image插件
        var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
        // 渲染图片
        img.className = 'poster_hbImg'
        $(".poster_cont .poster_hbBox").empty();
        $(".poster_cont .poster_hbBox").append(img);
        $(".posterbox").show();
    });
}
function getBase64Image(img) {
    const canvas = document.getElementById("canvas")
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}


