国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

html2canvas截圖生產(chǎn)海報(bào)圖片

這篇具有很好參考價(jià)值的文章主要介紹了html2canvas截圖生產(chǎn)海報(bào)圖片。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

<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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 解決使用 html2canvas 截圖不全問題

    解決使用 html2canvas 截圖不全問題

    1、截圖不全 之前沒用過這個,網(wǎng)上找了代碼之后發(fā)現(xiàn)有滾動條的情況下會截圖不全,僅能展示出當(dāng)前頁面展示出來的內(nèi)容,類似于這種情況,這是帶滾動條的html,第一張和第二張分別為滾動條在頂部以及在底部的展現(xiàn) 下載成pdf之后分別為這樣,只有窗口展示的部分,滾動條

    2024年02月11日
    瀏覽(27)
  • 前端html2canvas生成截圖【實(shí)現(xiàn)步驟與踩坑】

    需求 :點(diǎn)擊下載可以導(dǎo)出組件的 截圖 及數(shù)據(jù)信息文件 分析 :前端生成組件截圖,帶著其他參數(shù)傳給后端,拿到excel文件并下載。關(guān)鍵在于生成組件的截圖,這里通過 html2canvas 插件來實(shí)現(xiàn)。 1.下載插件 npm install html2canvas 2.引入 3.通過ref拿到要下載組件的dom元素 4.通過html2ca

    2024年04月11日
    瀏覽(28)
  • 前端html2canvas和dom-to-image實(shí)現(xiàn)截圖功能

    目錄 需求 歷劫過程 截圖知識點(diǎn) html2canvas 文檔地址 封裝 使用教程? dom-to-image-more 文檔地址 封裝 使用教程 解決跨域問題 以下是我花了大把時(shí)間,薅禿頭得出來的最終結(jié)果,?dom-to-image-more截圖時(shí)間快到可以讓復(fù)雜的頁面僅需2-3S就能完成截圖,內(nèi)容有點(diǎn)多,請保持耐心慢慢看

    2024年02月15日
    瀏覽(20)
  • 解決前端html2canvas生成圖片慢問題

    分享一個小發(fā)現(xiàn) 這里首先直接說結(jié)論: ????????由于html2canvas生成圖片的過程會從html的head、body層標(biāo)簽開始遍歷,所以對于項(xiàng)目較大,但是只需要對 某個dom (下文以D稱呼)生成圖片的情況非常不友好! ??????? ?所以,一定要通過ignoreElements過濾掉大部分沒用的標(biāo)簽。

    2024年02月13日
    瀏覽(23)
  • 小程序采用html2canvas實(shí)現(xiàn)html轉(zhuǎn)canvas保存圖片

    mpaas小程序中采用html2canvas實(shí)現(xiàn)html轉(zhuǎn)canvas保存圖片 使用uniapp將代碼打包一份h5部署到服務(wù)器 h5要保存的圖片組件頁面report.vue 安裝 npm install --save html2canvas 或 yarn add html2canvas 引入import html2canvas from ‘html2canvas’; ts 小程序中采用webview跳轉(zhuǎn)到h5頁面

    2024年02月11日
    瀏覽(23)
  • vue-element使用html2canvas實(shí)現(xiàn)網(wǎng)頁指定區(qū)域(指定dom元素)截圖

    直接上代碼: ** 如果要截取的dom元素、區(qū)域涉及到v-if或者v-show的條件表達(dá)式時(shí),截取的方法請?jiān)趎extTick里面調(diào)用----例如: this.$nextTick(() = { this.saveImageNew() }) 否之獲取dom元素的時(shí)候會獲取不到?。。。。。。?!

    2024年02月04日
    瀏覽(28)
  • html2canvas 下載圖片,scale、dpi處理圖像模糊

    1、安裝html2canvas 依賴 2、 引入html2canvas.js 3、html 4、方法,scale和dpi 解決模糊 html2canvas.js是從git上下載的: https://github.com/eKoopmans/html2canvas/tree/develop/dist 單純下載圖片方法 === 參考: 1、解決html2canvas截圖模糊的問題 2、html2canvas生成圖片模糊 不清楚?兩種解決方法 3、html2canvas在

    2024年02月17日
    瀏覽(22)
  • Html2canvas——圖片空白的幾種排查解決方案

    Html2canvas——圖片空白的幾種排查解決方案

    下列文章來源該篇 ? 一、工作原理 html2canvas庫的工作原理并不是真正的“截圖”,而是讀取網(wǎng)頁上的目標(biāo)DOM節(jié)點(diǎn)的信息來繪制canvas,所以它并不支持所有的css屬性。 二、在 img標(biāo)簽中加載外部圖片 前提是外部圖片允許跨域,需要服務(wù)器設(shè)置 以nginx為例,response-header內(nèi)要存在

    2024年03月20日
    瀏覽(21)
  • vue使用html2canvas實(shí)現(xiàn)一鍵截圖并賦值到剪貼板,只截取當(dāng)前顯示器上可視的內(nèi)容

    vue使用html2canvas實(shí)現(xiàn)一鍵截圖并賦值到剪貼板,只截取當(dāng)前顯示器上可視的內(nèi)容

    使用 html2canvas 和 clipboard API 實(shí)現(xiàn)整頁截圖并填充至剪切板。 訪問剪切板的api只支持在https或者本地localhost上使用,如果是http,則無法使用 首先需要從npm安裝html2canvas 然后在代碼中導(dǎo)入這個包: 之后綁定一個按鈕來實(shí)現(xiàn)該功能,比如點(diǎn)擊一個按鈕,然后就開始截圖當(dāng)前頁面并

    2024年02月15日
    瀏覽(29)
  • html2canvas 截圖空白 或出現(xiàn)toDataURL‘ on ‘HTMLCanvasElement或img標(biāo)簽沒截下來 的所有解決辦法

    html2canvas 截圖空白 或出現(xiàn)toDataURL‘ on ‘HTMLCanvasElement或img標(biāo)簽沒截下來 的所有解決辦法

    1.1以下的參數(shù)是必須要有的。 2.1這兩個是解決這個報(bào)錯的 3.1先設(shè)置上這個參數(shù) 3.2必須在img標(biāo)簽上加上這個參數(shù) 3.3最重要的一步就是必須把你的圖片路徑變成base64格式的,不管是網(wǎng)絡(luò)圖片還是本地圖片 都不管用 必須是base64格式的, 轉(zhuǎn)成了base64格式會截圖很慢,所以你截圖的

    2024年02月10日
    瀏覽(16)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包