zoukankan      html  css  js  c++  java
  • html2canvas截取屏幕的方法

    html2canvas截取屏幕的方法

    需要放在服务上运行,否则会报错,

    放在服务器里,完美运行

     处理截屏模糊的方法

     html2canvas 0.5.0-beta3解决截图模糊问题

    需要引入html2canvas 0.5.0-beta3

     var shareContent = $(".hbdiv");// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
            var width = shareContent[0].offsetWidth;  // 获取宽度
           var height = shareContent[0].clientHeight; // 获取高
           var offsetTop = shareContent[0].offsetTop;  //元素距离顶部的偏移量
           var canvas = document.createElement('canvas');  //创建canvas 对象
            var context = canvas.getContext('2d');
            var scaleBy=10;  //获取像素密度的方法 (也可以采用自定义缩放比例)
        //var scaleBy=hqmd(context); canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移 canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题 context.scale(scaleBy, scaleBy); var opts = { scale:scaleBy, // 添加的scale 参数 canvas:canvas, //自定义 canvas width, //dom 原始宽度 height:height //dom 原始高度 }; html2canvas($('.hbdiv'), opts).then(function (canvas) { var strDataURI = canvas.toDataURL("image/jpeg");    $("body").html(''); $("body").append($("<img>").attr("class", 'bimg').attr("src", strDataURI)); });

    获取像素密度方法

    function hqmd(context){
                 var backingStore = context.backingStorePixelRatio ||
                         context.webkitBackingStorePixelRatio ||
                         context.mozBackingStorePixelRatio ||
                         context.msBackingStorePixelRatio ||
                         context.oBackingStorePixelRatio ||
                         context.backingStorePixelRatio || 1;
                 return (window.devicePixelRatio || 1) / backingStore;
             }
  • 相关阅读:
    基于mAppWidget实现手绘地图--索引&DEMO
    C语言数据结构----栈的定义及实现
    libvirt命令行文档
    清理系统方法
    Linux 经典电子书共享下载
    使用数组实现队列----《数据结构与算法分析---C语言描述》
    清理系统垃圾
    epoll的内部实现 & 百万级别句柄监听 & lt和et模式非常好的解释
    进程、线程、socket套接字-资源大小 & 切换代价
    网络编程学习-面向工资编程
  • 原文地址:https://www.cnblogs.com/aSnow/p/8910908.html
Copyright © 2011-2022 走看看