import posterBgImg from '../public/images/poster_bg.png';// 海报底图
import qrcodeImg from '../public/images/qrcode.png';// 二维码
export default{
    name: 'qrcode-in-poster',
    data(){
        return {
            posterBgImg,
            qrcodeImg,
            posterSize: 930/650,// 海报高宽比例
            qrCodeSize: {// 二维码与海报对应比例 =》 用于设置二维码在海报中的位置
                width: 270/650,
                height: 270/930,
                left: 190/650,
                top: 448/650
            },
            poster: '',// 合成图片
        }
    }
};

methods: {
    combinedPoster(_url){
        let that = this,
            qrcode = this.qrcodeImg; // 二维码地址
    
        console.log("open draw: ", _url, qrcode)
        let base64 = '',
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d"),
            _w = this.screenWidth * 2, // 图片宽度： 由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊
            _h = this.posterSize * _w, // 图片高度
            _qr_w = this.qrCodeSize.width * _w, // 二维码宽 = 比例 * 宽度
            _qr_h = this.qrCodeSize.height * _h, // 二维码高 = 比例 * 高度
            _qr_t = this.qrCodeSize.top * _w, // 二维码顶部距离 = 比例 * 宽度
            _qr_l = this.qrCodeSize.left * _w; // 二维码左侧距离 = 比例 * 宽度
        // 设置canvas宽高    
        canvas.width = _w; 
        canvas.height = _h;
        ctx.rect(0, 0, _w, _h);
        ctx.fillStyle = '#fff'; // 填充颜色
        ctx.fill();
        // 迭代生成： 第一层（底图）+ 第二层（二维码）
        // file：文件，size：[顶部距离，左侧距离，宽度，高度]
        let _list = [ 
            {
                file: _url,
                size: [0, 0, _w, _h]
            }, {
                file: qrcode,
                size: [_qr_l, _qr_t, _qr_w, _qr_h]
            }
        ];
        // 开始绘画
        let drawing = (_index) => {
            // 判断当前索引 =》 是否已绘制完毕
            if (_index < _list.length) {
                // 等图片预加载后画图
                let img = new Image(),
                    timeStamp = new Date().getTime();
                // 防止跨域
                img.setAttribute('crossOrigin', 'anonymous')
                // 链接加上时间戳
                img.src = _list[_index].file + '?' + timeStamp
                img.onload = function() {
                    // 画图
                    ctx.drawImage(img, ..._list[_index].size)
                    // 递归_list
                    drawing(_index + 1)
                }
            } else {
                // 生成图片
                base64 = canvas.toDataURL("image/png")
                if (base64) {
                    // 赋值相应海报上
                    this.$set(that, 'poster', base64)
                }
            }
        }
        drawing(0)
    }
};

mounted(){
    // 需要合成海报的图片
    this.draw(this.posterBgImg)
}

methods: {
    handleDownload(){
        if(this.poster){
            let a = document.createElement("a"),
                name = `海报下载 - ${new Date().getTime()}`;// 文件名
            if(window.navigator.msSaveOrOpenBlob){
                // ie浏览器
                let s = atob(this.poster.split(",")[1]),
                    n = s.length,
                    u8_arr = new Uint8Array(n);
                while(n--){
                    u8_arr[n] = s.charCodeAt(n)
                }
                let blob = new Blob([u8_arr]);
                window.navigator.msSaveOrOpenBlob(blob, name+'.png')
            }else{
                // 常规浏览器
                let _event = document.createEvent("HTMLEvents");
                _event.initEvent("click", true, true)// 兼容火狐浏览器，是否冒泡and是否阻止浏览器默认行为
                a.setAttribute("download", name)
                a.href = this.poster
                // a.click()
                a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
            }
        }else{
            this.$message.warning("图片出错，请联系管理员！")
        }
    }
}