美文网首页
html2canvas生成图片文字偏下

html2canvas生成图片文字偏下

作者: 糖小羊儿 | 来源:发表于2024-07-11 10:16 被阅读0次

官方issues下面的解决方法

  const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');

    html2canvas(element).then(canvas => {
      style.remove();
    });

融合到自己的代码中,如下:

 exportImage(){
            const style = document.createElement('style');
            document.head.appendChild(style);
            style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
          
            const loading = this.$loading({
                lock: true,
                text: '稍等...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0)'
            });
            const canvasDom = this.$refs.businessCard; //截图区域div元素的ref=‘businessCard’
            html2canvas(canvasDom, {
                dpi: 300, // 解决生产图片模糊
                useCORS: true,
                allowTaint: false,
                logging: false,
                scale: 1,
                scrollY: 0, 
                scrollX: 0,
                windowHeight: this.$refs.businessCard.scrollHeight + 150
            }).then((canvas) => {
               style.remove();
                const img = new Image();
                img.style.display='block';
                img.style.margin='auto';
                img.src =canvas.toDataURL('image/png');  
                const newWin = window.open("", "_blank");
                newWin.document.write(img.outerHTML);
                loading.close();
            }).catch((e) => {
                console.log(e)
                loading.close();
            })
        },

相关文章

网友评论

      本文标题:html2canvas生成图片文字偏下

      本文链接:https://www.haomeiwen.com/subject/voxxhjtx.html