zoukankan      html  css  js  c++  java
  • html2canvas 生成base64图片 vue使用

    1.引入 

    import html2canvas from "html2canvas"
    <div class="body-content" ref='creatImg'>
        这是要生成图片的区域
    </div>
    
    <button @click='saveImg'>保存</button>
    
    saveImg(){
        //为避免出现位置偏移的情况,将滚动条置顶
        document.body.scrollTop = document.documentElement.scrollTop = 0
        html2canvas(this.$refs.creatImg,{scrollY:0}).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
              this.uImgUrl = dataURL;  //生成的图片连接地址
              this.file =  dataURLtoFile(dataURL, `test-${new Date().getTime()}.png`)  //将图片转为fie 文件流 
        })
        
    
    }

    2.将base 64图片生成为file流文件,如果需要将生成的图片传后台可使用此法

    // // 图片base64格式转换成文件流格式
    export function dataURLtoFile(base64File, filename){
        var arr = base64File.split(","),
          mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
    }

    写下该文章仅用于记录,如有不对的地方,望大神们不吝赐教

     
  • 相关阅读:
    知识体系总结
    计算机基础总结
    Redis总结
    Mysql总结
    JAVA基础总结
    有锁编程
    CAS
    读写自旋锁
    org.apache.log4j.Logger详解
    web.xml 中的listener、 filter、servlet 加载顺序及其详解
  • 原文地址:https://www.cnblogs.com/lxs-616/p/14846324.html
Copyright © 2011-2022 走看看