精华内容
下载资源
问答
  • 解决html2canvas图片模糊问题,必须使用此版本
  • vue html2canvas 图片模糊问题

    千次阅读 2019-09-27 15:41:56
    首先确定好要被截图的div ,注意里面放 img 不要用 div 的 background-image 不然截图模糊的问题不能用以下代码解决 <div id="imageWrapper"> // 这里是要被截图的div // 确保这里都是image,不要用 div ...

    话不多说直接上代码

    首先确定好要被截图的div ,注意里面放 img 不要用 div  的 background-image  不然截图模糊的问题不能用以下代码解决

    <div id="imageWrapper">
        // 这里是要被截图的div 
        // 确保这里都是image,不要用 div 的 background-image
        // 不然截图模糊的问题无法用以下代码解决
        // 多张图片的定位自己用 position 解决
        <img src="xxxxxxx" />
        <img src="xxxxxxx" />
    </div>  
    <div id="canvasDiv" >
        <img style="width:100%;height:100%;" class="real_pic" :src="dataURL" />
    </div>

    我这里参考了网上的代码,先放大,再缩小

    toImage() {
          var shareContent = document.getElementById('imageWrapper');//需要截图的包裹的(原生的)DOM 对象
          var width = shareContent.offsetWidth; //获取dom 宽度
          var height = shareContent.offsetHeight; //获取dom 高度
          var canvas = document.createElement("canvas"); //创建一个canvas节点
          var scale = window.devicePixelRatio; //定义任意放大倍数 支持小数
          // var scale = 2; //定义任意放大倍数 支持小数
          canvas.width = width * scale; //定义canvas 宽度 * 缩放
          canvas.height = height * scale; //定义canvas高度 *缩放
          canvas.style.width = width + "px";
          canvas.style.height = height + "px";
          canvas.getContext("2d").scale(scale,scale); //获取context,设置scale
    
          var opts = {
              // dpi: window.devicePixelRatio * 2,
              scale: scale , // 添加的scale 参数
              useCORS: true,
              canvas:canvas, //自定义 canvas
              logging: true, //日志开关
              // width: width, //dom 原始宽度
              // height: height, //dom 原始高度
              // backgroundColor: 'null',
          };
          var self = this;
          this.$html2canvas(shareContent, opts).then(function (canvas) {
            
            var IMAGE_URL = canvas.toDataURL("image/png");
            self.dataURL = IMAGE_URL;
          })
    
        },

    总结:起初我用的 background-img ,不然我怎样设置,截图出来都是模糊的,后来也是google了一下,才发现了这个问题,div不要用背景图,要放img进去。耗了不少时间,不过总算是解决了

    展开全文
  • 网上百度的方法都试了遍,有的说新建的...把html2canvas降到 v1.0.0版本 生成的图片无比清晰。终于想到了解决方法。太开心了。 下载地址:https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0 //生成海报

    网上百度的方法都试了遍,有的说新建的 canvas的、有的说截图的图片不要用背景要用<img/>标签的。各种龙飞凤舞的都有。但问题并没得到解决。愁呀~

    在一筹莫展之时灵光一闪:会不会是html2canvas的版本问题呢?一试果然如此。

    截图的图片无论是background 还是 使用<img/>标签效果都一样。

    把html2canvas降到 v1.0.0版本 生成的图片无比清晰。终于想到了解决方法。太开心了。写出来希望能帮到一些有需要的人!!!如果对你有帮助,请留下你的脚印~~

    下载地址:https://github.com/niklasvh/html2canvas/releases/tag/v1.0.0

        //生成海报
        function Generate () {
                var targetDom = document.getElementById('imgBox');
                html2canvas(targetDom, {
                    useCORS: true,// 开启跨域配置
                    height: targetDom.scrollHeight,//canvas高
                    width: targetDom.scrollWidth, //canvas宽
                    scale: 4, //按比例增加分辨率 (2=双倍).
                    dpi: window.devicePixelRatio * 4,//设备像素比
                }).then(canvas => {
                    let url = canvas.toDataURL("image/jpeg", 1.0);
                    console.log(url)
    
                });
        }

    展开全文
  • 在uni-app中把image改成img标签使用

    在uni-app中把image改成img标签使用

    展开全文
  • Html2canvas 图片模糊,可能的三种处理方法: 1、修改元素的宽高像素。 如果元素及其子元素的宽高变大了,截出的图片也会更大,更清晰。特别是对图片,其清晰度和原始宽高像素值直接相关。如果把图片元素的宽高放大...

    Html2canvas 图片模糊,可能的三种处理方法:

    1、修改元素的宽高像素。 如果元素及其子元素的宽高变大了,截出的图片也会更大,更清晰。特别是对img或者带背景图的元素,其清晰度和原始宽高像素值直接相关。如果把图片元素的宽高放大并设置transform scale缩小,图片在页面的显示效果不变,但截图时图片分辨率会提高。

    2、修改元素的transform: scale(2) 让截图根元素放大,并让截出的图片变大。大图片自动缩小后看,会显得清晰。但是在一些细节,比如文字阴影的偏移方面,显示会有偏差,没有进行相应的缩放。

          let start = () => {
            $('#rootNode').css('transform', ‘scale(2)'); // 截图时放大
          };
          let end = () => {
            $('#rootNode').css('transform', ‘scale(.5)); // 截图后恢复
          };
    

    3、html2canvas 的scale参数。这个效果上和方法2基本没有区别。scale参数默认值为 window.devicePixelRatio, mac的视网膜屏上,默认是2了(如果为1, 在视网膜屏幕上会糊),所以mac图片的像素大小是windows图片的2倍。如果要让截出的图大小统一,可以统一设置为2。

    上述3种方法,1是最好的,特别是需要提高嵌入的图片的分辨率的时候。2,3差不多,但是3的细节方面要稳定些(比如文字阴影)。

    综合来说, 效果 是 1 >2 >3, 实现成本是1 > 2 = 3。

    要求不高的场合, 方法3足够好。

    清晰度要求高的场合,需要三者结合:

    A. 先采用1, 以放大2倍的方式,绘制需要截图的根元素下所有dom元素的宽高。并通过transform: scale(.5)缩小元素,在页面正常显示。这一步也可以不是2倍,而是其他倍数。

    B. 截图前采用2,将transform scale(.5)移除, 恢复默认的2倍大小,同时可以规避html2canvas在处理transform过的元素时的各种bug和限制(如阴影偏移)。

    C. 最后采用3,设置比例,调整最终的截图大小。

    完整代码:

    
        svgToImage(node){
          // 截图前
          let start = () => {
            $(node).css('transform', ''); // 相当于scale(1)
    
            // 截图时文字偏下修正
            $('.editable').each( function () {
              let $this = $(this);
              var paddingTop = +$(this).css('paddingTop').split('px')[0];
              $(this).css('paddingTop', paddingTop - 10 + 'px');
            });
          };
          // 截图后
          let end = () => {
            $(node).css('transform', 'scale(.5)'); // 页面中默认scale
    
            // 恢复文字偏下修正
            $('.editable').each(function () {
              let $this = $(this);
              var paddingTop = +$(this).css('paddingTop').split('px')[0];
              $(this).css('paddingTop', paddingTop + 10 + 'px');
            });
          };
          start();
          html2canvas(node, {
            scale: 2 * .8,  // scale 参数
            allowTaint: true,
            useCORS: true
            // foreignObjectRendering: true
          }).then(canvas => {
            
            // 缩小成想要的比例
            const w = 900;
            const h = 383;
            const elem = document.createElement('canvas');
            elem.width = w;
            elem.height = h;
            const ctx = elem.getContext('2d');
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = "high";
            ctx.drawImage(canvas, 0, 0, w, h);
            canvas = elem;
    
            var b64;
            try {
              b64 = canvas.toDataURL("image/png");
            } catch (err) {
              console.log(err);
              end();
              alert(err);
            }
           
            var a = document.createElement("a");
            a.href = b64;
            a.download = 'poster.png'; //设定下载名称 
            var evt = document.createEvent("MouseEvents");
            evt.initEvent("click", true, true);
            a.dispatchEvent(evt);
            end();
          });
        }
    

    如果要对最终图片的大小有明确要求,可以用上述3种方法将图片放大,然后再利用下述代码缩小。其中用到了imageSmoothingQuality属性,缩小后效果更平滑。注意这个办法更适合缩小而不适合放大,用这个方法放大的清晰度不如上述3种方法的结合。

            // 缩小成想要的比例
            const w = 900;
            const h = 383;
    
            const elem = document.createElement('canvas');
            elem.width = w;
            elem.height = h;
            const ctx = elem.getContext('2d');
            ctx.imageSmoothingQuality = "high”;
            ctx.drawImage(canvas, 0, 0, w, h);  // canvas为html2canvas导出的canvas
            canvas = elem;    // 用elem 替换原来的 canvas
    

    截图中文字有时会有位移,偏下。可以用下述方法规避。 start为截图前的函数, end为截图后。

          let start = () => {
            // 截图时文字会偏下,所以先调成偏上
            $('.editable').each( function () {
              let $this = $(this);
              var paddingTop = +$(this).css('paddingTop').split('px')[0];
              $(this).css('paddingTop', paddingTop - 10 + 'px');
            });
          };
          let end = () => {
            // 恢复修正
            $('.editable').each(function () {
              let $this = $(this);
              var paddingTop = +$(this).css('paddingTop').split('px')[0];
              $(this).css('paddingTop', paddingTop + 10 + 'px');
            });
          };
    

    html2canvas 原理和不支持的属性说明

    The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements there, which it then uses to build a representation of the page. In other words, it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.

    As a result, it is only able to render correctly properties that it understands, meaning there are many CSS properties which do not work. For a full list of supported CSS properties, check out the supported features page.

    不支持属性列表 尤其注意svg图片作为背景时,很可能出现乱码。尽量不要使用svg图片。

    图片太大会影响性能,建议控制在1920 * 1080像素以内。

    本文写作时用到的html2canvas版本是 1.0.0-rc.5, 相信随着越来越多的bug修正和特性完善,html2canvas的使用体验会越来越完善,不用再这么大费周折。
    错误再所难免,希望大家指正。

    展开全文
  • html2canvas图片模糊解决方案.docx
  • html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制: 不支持iframe 不支持跨域图片 不能在浏览器插件中使用 部分浏览器上不支持SVG图片 不支持Flash 不支持...
  • 在网上查到生成图片的有一个插件,叫做 html2canvas 可以把你想要转变的元素变为图片,开始很顺利,但是生成后的图片,和实际的页面不符合,图片不清晰,模糊的情况,网上大部分的解决方案是通过把 canvas 容器扩大...
  • 第一种方法请查看来源网址第二种方法:(亲测有效,方便)作者在 html2canvas 的源码中添加了两个参数,分别为 scale 和 dpi,scale 是比例,辣么 dpi 是个什么玩意儿,以下是百度百科对 dpi 的定义:DPI 是指每英寸的...
  • 完整代码(已解决截取区域问题,未解决模糊问题): 合成图片并保存 家乡的茶园开满花 夜夜想起妈妈的话 闪闪的泪光鲁冰花 家乡的茶园开满花 夜夜想起妈妈的话 闪闪的泪光鲁冰花 家乡的茶园开满花 夜夜想起妈妈的话...
  • 不多说,上代码 function test() { html2canvas($('#test'),{ dpi:1000, onrendered: function(canvas) { convertCanvasToImage(canvas); } }) } function convertCanvasToImage(canvas) {
  • html2canvas案例解决模糊不清及滚动下来问题(已测试,可直接应用到项目中)
  • 可以让用户长按图片保存到本地手机在网上查到生成图片的有一个插件,叫做 html2canvas 可以把你想要转变的元素变为图片,开始很顺利,但是生成后的图片,和实际的页面不符合,图片不清晰,模糊的情况,网上大部分的...
  • 接上一篇,截取隐藏域图片,截图出现图片模糊,处理函数如下 toImage() { let _canvas = this.$refs.imageWrapper; let canvas2 = document.createElement("canvas"); let w = parseInt(window....
  • 接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还真有一款名叫html2canvas的插件,我心想看来这任务还是挺简单的,那开始吧! html2canvas 运行脚本,可以直接在用户浏览器上拍摄网页或其部分的...
  • 有些h5项目有长按保存图片的需求,可以使用 html2canvas 来实现相对应的功能,但是在项目中发现有的地方模糊不清,比如网页中有一张二维码的图片模糊,无法识别,后来发现,图片之类的不要当作背景图片,也就是直接...
  • 首先分析下自己项目采用了网上的方法后依然模糊的原因是引用的html2canvas版本太旧了(0.4.1的版本),这个版本不支持配置window.devicePixelRatio这个配置,所以我们需要在github上去下载最...
  • 在网上查到生成图片的有一个插件,叫做 html2canvas 可以把你想要转变的元素变为图片,开始很顺利,但是生成后的图片,和实际的页面不符合,图片不清晰,模糊的情况,网上大部分的解决方案是通过把canvas容器扩大,...
  • 主要介绍了HTML5 Canvas图像模糊完美解决办法,需要的朋友可以参考下
  • 使用uniapp写微信公众号时,很多需求是将网页报错成图片海报然后保存图片去分享,js插件html2canvas能够简单的将网页绘制成canvas并转换为图片 使用方法: import html2canvas from 'html2canvas'; makeImg() { ...
  • function pxRa(cxt) { var backingStore = context.... html2canvas(obj).then(function(canvas) { var copyStr = canvas.toDataURL("image/png", 0.92); $(\'.complex-img\').attr(\'src\', copyStr); });
  • 解决html2canvas截图模糊

    千次阅读 2019-07-17 09:50:10
    html2canvas 截图模糊,配置宽高效果不明显,更换进阶版插件后截图非常清晰 以下是增加了dpi和scale两个选项之后的html2canvas源码: https://github.com/RunSky87/html2canvas-develop/tree/master/dist 默认...
  • html2canvas 图片合成模糊问题解决

    万次阅读 热门讨论 2018-06-20 14:28:54
    做项目时,用到了html2canvas来把一个分享的弹窗,合成图片再分享出去,但是有个问题一直困扰很久,那就是合成的图片模糊。网上找了下方法,主要是通过把canvas容器扩大,再将和成的图片进行缩放。具体的代码: ...
  • html2canvas(content, { backgroundColor: '#FFFFFF', //设置截图的背景色 useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题 allowTaint: true, //允许跨域...
  • 通过纯JS插件对浏览器端的页面进行截图,截图之后再进行保存下载。
  • html2canvas是一个非常强大的截图插件,很多生成图片和打印的场景会用到它 但是效果很模糊 ,本文主要记录一下如果解决模糊的问题以及各种参数如何设置 目录 基本用法 处理模糊问题 细节问题-压缩base64, 导出...
  • 关于canvas图片模糊问题最好的办法就使用Window.devicePixelRatio Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。 此值也可以解释为像素大小的比率:一个CSS像素的大小与一...
  • html2canvas截取div内容下载解决图片模糊和图片偏移 $("#btnsave").click(function(){ var copyDom = $("#modalcontent"); var width = copyDom.offsetWidth;//dom宽 var height = copyDom.offsetHeight;//dom高 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,770
精华内容 2,708
关键字:

html2canvas图片模糊