精华内容
参与话题
问答
  • html2canvas 截图模糊,配置宽高效果不明显,更换进阶版插件后截图非常清晰 以下是增加了dpi和scale两个选项之后的html2canvas源码: https://github.com/RunSky87/html2canvas-develop/tree/master/dist 默认...

    html2canvas 截图模糊,配置宽高效果不明显,更换进阶版插件后截图非常清晰
    以下是增加了dpi和scale两个选项之后的html2canvas源码:
    https://github.com/RunSky87/html2canvas-develop/tree/master/dist

    默认可用选项(options)

    参数名称 类型 默认值 描述
    allowTaint boolean false 允许跨域
    useCORS boolean false 貌似与跨域有关,但和allowTaint不能共存
    proxy string undefined 代理地址
    taintTest boolean true 是否在渲染前测试图片
    timeout number 0 图片加载延迟,默认延迟为0,单位毫秒
    logging boolean false 在Console中输出信息
    width number null canvas的宽度设定
    height number null canvas的高度设定
    background string #fff canvas的背景颜色(未指定则为透明)
    letterRendering boolean false 在设置了字间距的时候有用

    新加可选用项

    参数名称 类型 默认值 描述
    scale number 1 按比例增加分辨率 (2=双倍).
    dpi number 96 将分辨率提高到特定的DPI(每英寸点数)

    使用中 配置:scale:2,dpi:300
    截图清晰度与原画面没区别

    补充:
    DPI是指每英寸的像素,也就是扫描精度。DPI越低,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi,但是冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。例如要冲洗46英寸的照片,扫描精度必须是300dpi,那么文件尺寸应该是(4300)(6300)=1200像素*1800像素。

    展开全文
  • 官网 ...安装 npm install --save html2canvas使用(自带解决图片模糊的问题)//id dom的id name 下载图片的名称downloadCard(id,name){varcopyDom=document.getElementById(id);//要保存的domva...

    官网 http://html2canvas.hertzen.com/

    安装 npm install --save html2canvas

    使用(自带解决图片模糊的问题)

    //id dom的id     name 下载图片的名称downloadCard(id, name) {      var copyDom = document.getElementById(id); //要保存的dom      var width = copyDom.offsetWidth; //dom宽      var height = copyDom.offsetHeight; //dom高      var scale = 2; //放大倍数      html2canvas(copyDom, {        dpi: window.devicePixelRatio * 2,        scale: scale,        width: width,        heigth: height,        useCORS: true // 【重要】开启跨域配置      }).then(function(canvas) {        var context = canvas.getContext("2d");        // 【重要】关闭抗锯齿        context.mozImageSmoothingEnabled = false;        context.webkitImageSmoothingEnabled = false;        context.msImageSmoothingEnabled = false;        context.imageSmoothingEnabled = false;        var url = canvas.toDataURL();        var triggerDownload = $("")          .attr("href", url)          .attr("download", name + ".png")          .appendTo("body");        triggerDownload[0].click();        triggerDownload.remove();      });    }

    效果:

    ab6434f64372948e2d758b28fb4a8940.png

    奥利给了

    展开全文
  • html2canvas(content, { backgroundColor: '#FFFFFF', //设置截图的背景色 useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 allowTaint: true, //允许跨域...
  • VUE 移动SPA html2canvas截图不清晰问题

    千次阅读 2017-05-12 10:00:01
    1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决 :原因是devicePixelRatio决定了canvas的清晰度 :网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = (...

    1、最近做一个移动web,用到html2canvas截图模糊问题一直存在网上找了很久依然没有解决
    :原因是devicePixelRatio决定了canvas的清晰度
    :网上又有了修改html2canvas源码生成dom元素的宽高倍数var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];
    node.setAttribute(html2canvasNodeAttribute + index, index);
    return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) {
    if (typeof(options.onrendered) === "function") {
    log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
    options.onrendered(canvas);
    }
    return canvas;
    });

    这样做出来的结果呢!宽比例变形不可控基本没用 简书html2canvas截图的清晰度问题
    (个人也觉得html2canvas是可以的,可是结果就是行不通,可能是因为html2canvas社区对于移动设备的应用没有足够的支持,希望他们能够早点给出针对移动设备的方法)
    :在这vue之前我是用Angular写的,遇到这个截图不清晰的问题,导致在Angular写的项目中加入普通的jquery html页面
    ,结果路由跳转就混乱了,后面重构用了比较火vue 2.0 +webpack构建
    进入主题:
    我们项目中的解决办法就是修改html meta属性
    1、通常我们写移动web的meta是<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    这么截图都会以单倍屏来截图 iphone5 320 、iphone 6 375、 iphone 6plus 414;生成的图片都是模糊的。
    本人思路
    一、:在截图的时候将需要生成元素或容器再生成一次,将宽高比例都放大一倍,再去用html2canvas去生成图片(问题是:dom元素较多时,中间创建一次,html2canvas本身要创建一次这样会耗太多性能《适合单次、灵活性好》)
    二、:针对方法一,另一种方法,就是再截图的时候设置页面 document.body.style.zoom 的倍数这样省去创建的过程,截图完成再缩小回去,确实可生成你想要的图片(会出现两个问题:1、body.style.zoom本身存在兼容性问题,2、截图过程body放大,页面会乱,而且完成后缩放,页面会出问题的)
    三、:方法二,对于重复调用是可行性(勉强可用),这就有了第三种方法,我们再需要做截图操作的页面 设置<meta name="viewport" content="1080", initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>,
    此时呢:原本页面宽高、字体大小都要重新设置了,其他页面meta还是不用修改(总感觉有点怪怪的,不过这样确实可行,要不是第一次用的是angular,出现路由问题也不会有终极方案)
    最终方法 最近一次项目重构用的时Vue SPA(单页面应用,webpack构建),我们项目中所有的宽高单位时rem为了适配移动端大小设置,这样再(iphone 6)750px宽度的屏幕 1rem = 50px,再index.html script最先设置 document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5
    最后设置 <meta name="viewport" content="width=640,height=device-height,initial-scale=0.5,maximum-scale=0.5,user-scalable=no">这里width= 640 iphone 5起用 再把放大倍数缩小这样布局不用修改任何东西就完全OK了

    效果对比大小一样
    修改后
    修改前

    第一次写博客,望斧正

    展开全文
  • 接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还真有一款名叫html2canvas的插件,我心想看来这任务还是挺简单的,那开始吧! html2canvas 运行脚本,可以直接在用户浏览器上拍摄网页或其部分的...

    最近由于公司业务要求,需要完成一个HTML页面效果渲染后生成照片的功能,功能的核心是把HTML代码展现的内容转化为png或者jpg图片。接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还真有一款名叫html2canvas的插件,我心想看来这任务还是挺简单的,那开始吧!

    html2canvas

    运行脚本,可以直接在用户浏览器上拍摄网页或其部分的“截图”。截图是基于DOM,因此并不是100%准确的真实表示,因为它是实际的截图,而是根据页面上可用的信息构建截图。(引用自html2canvas官网)

    入门

    html2canvas的简单调用:

    // element是需要截图的元素
    html2canvas(element,options);

    可用选项(options)

    参数名称 类型 默认值 描述
    allowTaint boolean false 允许跨域
    useCORS boolean false 貌似与跨域有关,但和allowTaint不能共存
    proxy string undefined 代理地址
    taintTest boolean true 是否在渲染前测试图片
    timeout number 0 图片加载延迟,默认延迟为0,单位毫秒
    logging boolean false 在Console中输出信息
    width number null canvas的宽度设定
    height number null canvas的高度设定
    background string #fff canvas的背景颜色(未指定则为透明)
    letterRendering boolean false 在设置了字间距的时候有用

    特别的是,html2canvas提供了回调事件--onrendered来渲染canvas:

    html2canvas(element,{ 
        onrendered:function(canvas){ 
            // canvas是最终渲染的<canvas>元素
        } 
    });
    html2canvas(document.getElementById('view')).then(function(canvas) {
                                                        var myImage4 = canvas.toDataURL("image/jpeg",1.0);
                                                        //并将图片上传到服务器用作图片分享
                                                        var fileName4 = "ws_" + $("#period").val()+'_shouji';
                                                        $.ajax({
                                                            type : "POST",
                                                            url : ctx+'/portal/upload',
                                                            data : {data:myImage4,fileNAme:fileName4},
                                                            timeout : 60000,
                                                            success : function(data){
                                                                alert("静态资源文件生成完毕!");
                                                                mini.unmask(document.body);
                                                            }
                                                        });
                                                    });

    最原始效果图找不到了,放一张稍微有点对比性的吧,最原始截出来文字发虚,模糊度文字无法叙述:

    html2canvas提供了scale属性可调整清晰度:

    优化后效果图:

    参数用法介绍:

    参数名称

    类型

    默认值

    描述

    scale number 1 按比例增加分辨率 (2=双倍).
    dpi number 96 将分辨率提高到特定的DPI(每英寸点数)

    html2canvas.js

    展开全文
  • 实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: ... ...html2canvas截图模糊处理: 1 /*图片跨域及截图模糊处理*/ 2 let canvasContent = document.getElementById('canvas'),...
  • 提高html2canvas截图精度 / 提高dpi

    千次阅读 2018-12-25 17:49:24
    使用了html2canvas截的图比较模糊,我之前也记录过这个问题,html2canvas 实现网页截图,但是现在要对截图的精度进行优化,截出来的图片要实现打印照片的功能,也就是说html2canvas截图至少要达到300dpi,这样打印...
  • script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> //主要代码 <script type="text/javascript"> function getFormatDate() { var date ...
  • html2canvas案例

    2017-02-09 11:07:23
    解决html2canvas截图模糊的问题
  • vue html2canvas 图片模糊问题

    千次阅读 2019-09-27 15:41:56
    首先确定好要被截图的div ,注意里面放 img 不要用 div 的 background-image 不然截图模糊的问题不能用以下代码解决 <div id="imageWrapper"> // 这里是要被截图的div // 确保这里都是image,不要用 div ...
  • 通过使用html2canvas生成指定div的截图信息 问题:生成的海报模糊 2.解决办法 不多废话直接贴关键代码 body部分: <div class="poster_bg"> <div class="share_title"> <p style="margin: ...
  • 作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题; 背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现模糊的问题 <style> .img-pic { width: 100%; height: ...
  • 今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地。   只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是生成的图片模糊 //...
  • 在做canvas插入文本框+截图功能的时候使用 html2canvas, 出现保存的图片模糊的问题。 搜了很多帖子,都有略微差别,有的改了源码也不说 = =, 最后找到可用的,清晰度很高的。保存一下。 下面是例子 let targetDom...
  • 最近有个做在线名片(可保存图片至本地)的任务... 其中也遇到了一些坑比如查询网上的 html2canvas 使用方法,发现很多人总结的方法做出来的图很模糊,或者不支持移动端。最后发现官方API给的方法可用,但是用官方给
  • 之前的方案确实可以打印出a4的大小的pdf,但是也呈现了诸多问题,因为这种方法是截图然后再进行打印的,所以打印出来的效果是模糊的,思前想后决定放弃了这种方式. 最终还是决定使用浏览器自带的打印方法. 设置打印...
  • <div class="codeView"> <!-- 要生成截图的div --> <div class="codeBox" id="codeBox"> <div class="code_usser"> <div class="code_photo_Box"> ...
  • 前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地...我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascrip...
  • 使用html2canvas.js实现页面截图

    万次阅读 2018-01-31 11:09:37
    由于最近项目需求,需要实现html页面截图,经过查资料,找到了这个东东html2canvas,刚开始截出来的图片,空白、模糊、图片不完整,各种问题,但幸好有各路大神的见解,把问题解决了,以下是我写的一个demo,仅供...
  • canvas 截图插件 (截取html页面)

    千次阅读 2018-08-30 17:09:08
    其中 capture 为要截取的 内容 (一个 class 或者一个ID 都可以) down 为存放 src 的图片的 class  放大三倍 是为了 图片更加清晰 function img(){ //直接选择要截图的dom,就能... html2canvas(docume...
  • html2canvas 图片合成模糊以及保存为图片背景图丢失问题解决 注意 作为背景的图片必须放在服务器,存放在本地会出现截图的时候背景图丢失的问题; 背景图必须放在img里面里面,通过定位处理成和背景一样,否则会可能出现...
  • 1,页面大体的样式: ...)2,实现的大体思路: (1) 使用html2canvas将DOM节点转为图片(略过截图模糊、图片跨域、外联样式渲染错误、错位、iframe等...自己百度解决吧,其实不难,把你要转的节点clone一份,a...
  • 第1:大家一定一定去官网copy最新的html2canvas.js 老版本有bug很gg, 然后贴上我的代码 跟着这个代码写完美解决“图片模糊”于“图片位移”俩个问题 这个方法就是点击触发,然后执行div转变成图片的操作。这个'...
  • html2canvas使用记录

    2020-07-13 11:36:07
    该插件,我使用的是1.0.0-rc.4版本,网上提到的旧版本的一些问题,基本都得到了解决,比如手机端截图模糊问题,跨域图片缓存问题,都没有出现 //此处dom对象也可使用jquery获取,但要注意jquery获取的是jqery对象obj...
  • html2canvas截取屏幕的方法 ...html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2canvas 0.5.0-beta3 var shareContent = $(".hbdiv");// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使...

空空如也

1 2 3
收藏数 48
精华内容 19
关键字:

html2canvas 截图模糊