html2canvas截图工具初体验

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏，html2canvas脚本将当页面渲染成一个Canvas图片它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。

// 要截图的DOM
 <div id="sharePic">
   <img :src="xxx.png"/>
   <p>这是分享的内容</p>
 </div>

 methods: {
      getSharePic () {
        let _this = this
        
        // 要绘制图片的DIV
        let shareBox = document.getElementById('sharePic')
        
        // 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
        let width = shareBox.offsetWidth
        
        // 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
        let height = shareBox.offsetHeight
        
        // 返回元素的上外缘距离最近采用定位父元素内壁的距离
        let offsetTop = shareBox.offsetTop
        
        // 创建canvas画布
        let canvas = document.createElement_x_x_x_x_x_x_x_x('canvas')
        
        // 指定绘图类型为二维绘图，未来如果支持3D绘图，就可以传递3d参数
        let context = canvas.getContext("2d")
        
        // 返回当前显示设备的物理像素分辨率与css像素分辨率的比率，可理解为像素大小比率
        let scaleBy = Math.ceil(window.devicePixelRatio)
        
        // 定义画布的宽度
        canvas.width = width * scaleBy
        
        // 定义画布的高度
        canvas.height = (height + offsetTop) * scaleBy
        
        let params = {
         useCORS: true, // 允许加载跨域的图片
         tainttest: true, // 检测每张图片都已经加载完成
         scale: scaleBy, // 添加的scale 参数
         canvas: canvas, // 自定义 canvas
         logging: false, // 日志开关，发布的时候记得改成false
         width: width,  // DOM 原始宽度
         height: height // DOM 原始高度
        }
        
        html2canvas(shareBox, params).then(function(canvas) {
          // 获取到图片的url
         let url = canvas.toDataURL()
        })
      }
    }

html2canvas 生成图  （ 弹窗内 ） url 形式base64格式呈现

最后

以上就是瘦瘦夕阳为你收集整理的html2canvas截图工具初体验的全部内容，希望文章能够帮你解决html2canvas截图工具初体验所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。