<template>
  <div>
    <img :src="posterImg" v-if="posterImg" class="poster"/>
    <div id="poster" class="poster" ref="poster" v-else>
      <img id="bgimg" class="bgimg" crossorigin="anonymous" :src="`${posterInfo.bg}?time=${new Date().valueOf()}`">
      <img id="banner" class="banner" crossorigin="anonymous" :src="`${posterInfo.personnel_share_img}?time=${new Date().valueOf()}`">
      <div id="title" class="title">{{ posterInfo.activity_name || '' }}</div>
      <div id="info" class="info view2">
        <div style="flex: 1;display: flex;align-items: center;">
           <img id="infoavatar" class="info-avatar" crossorigin="anonymous" :src="`${posterInfo.avatar_url}?time=${new Date().valueOf()}`">
            <div class="info-left">
                <div class="info-name">{{ posterInfo.personnel_name }}</div>
                <div class="info-dec">分享給你</div>
            </div> 
        </div>
        <img id="infocode" class="info-code" crossorigin="anonymous" :src="`${posterInfo.qr_img_url}?time=${new Date().valueOf()}`">
    </div>
    </div>
  </div>
</template>

圖片地址后添加?time=${new Date().valueOf()}，不然會報(bào)圖片跨域報(bào)錯
原因：這是因?yàn)槟鉯mg是在緩存數(shù)據(jù)中讀取的 并沒有訪問遠(yuǎn)程這個圖片的時(shí)候沒有攜帶請求頭。
確保你的圖片服務(wù)器支持CORS訪問，也就是會返回Access-Control-Allow-Origin等響應(yīng)頭；文章來源地址http://www.zghlxwxcb.cn/news/detail-784074.html

import html2canvas from 'html2canvas'


       //響應(yīng)式，高度根據(jù)寬度比例響應(yīng)，定位
        makeDom(){
            let _this = this;
            this.$nextTick(function(){
                let poster = document.getElementById('poster');
                let posterWidth = poster.offsetWidth;
                let bgimg = document.getElementById('bgimg');
                let banner  = document.getElementById('banner');
                let title  = document.getElementById('title');
                let info  = document.getElementById('info');
                let infoavatar   = document.getElementById('infoavatar');
                let infocode   = document.getElementById('infocode');
                poster.style.height = posterWidth*1.35+'px';
                bgimg.style.height = posterWidth*1.35+'px';
                banner.style.top = posterWidth*0.5+'px';
                banner.style.height = posterWidth*0.4+'px';
                title.style.top = posterWidth*0.93+'px';
                info.style.top = posterWidth*1.05+'px';
                infoavatar.style.width = posterWidth*0.16+'px';
                infoavatar.style.height = posterWidth*0.16+'px';
                infocode.style.width = posterWidth*0.23+'px';
                infocode.style.height = posterWidth*0.23+'px';
                setTimeout(function() {
                   _this.makePoster();
                },2000)
            })
        },
        //生成圖
        makePoster(){
            let that = this;
            html2canvas(this.$refs.poster, {
                backgroundColor: '#fff',
                useCORS: true,//開啟跨域
                imageTimeout: 6000,
                logging: true,
                //allowTaint: true,
            }).then(canvas => {
                    let dataURL = canvas.toDataURL('image/png');
                    let file = that.base64toFile(dataURL)
                    //file就是圖片，可做一個圖片上傳到自己的資源服務(wù)器
                }).catch((err) => {})
        },
        base64toFile(dataurl, filename = "file") {
            let arr = dataurl.split(",");
            let mime = arr[0].match(/:(.*?);/)[1];
            let suffix = mime.split("/")[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], `${filename}.${suffix}`, {
                type: mime,
            });
        },

到了這里，關(guān)于html2canvas截圖生產(chǎn)海報(bào)圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！