vue html2canvas生成base64图片和图片高度

游九尘

已于 2024-06-02 19:41:32 修改

阅读量805

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端

于 2024-06-02 19:15:09 首次发布

本文链接：https://blog.csdn.net/u012162516/article/details/139395696

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

vue html2canvas生成图片

exportAsBase64() {
      const ele = document.getElementById('content');
      html2canvas(ele, {
        dpi: 96, // 分辨率  
        scale: 2, // 设置缩放  
        useCORS: true, // 允许canvas画布内跨域请求外部链接图片  
        bgcolor: '#ffffff', // 背景颜色  
        logging: false, // 不打印日志  
        allowTaint: true, // 允许跨域  
        scrollY: 0,
        scrollX: 0
      }).then((canvas) => {
        // 使用canvas的toDataURL方法将canvas转换为Base64图片  
        const base64Image = canvas.toDataURL('image/png'); // 你可以根据需要更改'image/png'为'image/jpeg'等  

        // 在这里你可以对base64Image做进一步处理，比如将其赋值给img元素的src，或者发送到服务器等  
        console.log(base64Image); // 打印Base64图片数据到控制台  
      })
        .catch((error) => {
          console.error('导出图片失败:', error);
        });
    },

加上异步和 base64图片高度

    async exportAsBase64() {
      try {
        const ele = document.getElementById('content');

        // 临时设置元素的高度（注意：这可能会破坏你的布局，所以你可能需要在之后恢复它）  
        ele.style.height = '1000px';
        ele.style.overflow = 'hidden'; // 如果需要的话，可以添加这个来隐藏超出部分  

        const canvas = await html2canvas(ele, {
          dpi: 96, // 分辨率    
          scale: 2, // 设置缩放    
          useCORS: true, // 允许canvas画布内跨域请求外部链接图片    
          bgcolor: '#ffffff', // 背景颜色    
          logging: false, // 不打印日志    
          allowTaint: true, // 允许跨域    
          scrollY: 0,
          scrollX: 0
        });

        // 使用canvas的toDataURL方法将canvas转换为Base64图片    
        const base64Image = canvas.toDataURL('image/png'); // 你可以根据需要更改'image/png'为'image/jpeg'等

        // 恢复元素的高度（如果需要的话）  
        ele.style.height = ''; // 清除之前设置的高度  
        ele.style.overflow = ''; // 清除之前设置的overflow  

        // 在这里你可以对base64Image做进一步处理，比如将其赋值给img元素的src，或者发送到服务器等    
        // console.log(base64Image); // 打印Base64图片数据到控制台   

        return await this.uploadImg(base64Image)
      } catch (error) {
        console.error('导出图片失败:', error);
        return ''
      }
    },