精华内容
下载资源
问答
  • html2canvas
    千次阅读
    2021-06-11 05:37:01

    关键字: Access-Control-Allow-Origin  disable cache

    一、版本选择https://github.com/niklasvh/html2canvas

    笔者写文章时,html2canvas最新版本是v1.0.0-rc.5,但是使用过程中采用的版本是1.0.0-alpha.9。原因是在 v1.0.0-rc.0开始,ios8的机器下,如果截屏区域中有base64格式的图片时,会出现error loading images的错误。为了兼容该机器,采用了较低版本。

    二、白屏问题

    相信大家都知道,html2canvas使用过程中经常遇到白屏问题,大致有几种:1、部分css3样式不支持;

    2、截屏时目标区域有部分不在可视区域中;

    3、截屏部分中的图片资源加载失败导致的白屏;(此类解决方案可参考我另一篇文章中关于Blob的讲解https://www.jianshu.com/p/7e2a4b88e7ca)

    4、图片资源跨域

    这里想阐述的是第4种跨域导致的白屏,其实解决方法很简单,只不过这里想写写整个过程中遇到的诡异现象。

    首先,访问跨域图片资源,以下参数很重要:useCORS: true;但这只是客户端的设置,重要的是服务端要支持cors。html2canvas({ useCORS: true })

    大家知道,html2canvas截图时,无论截图区域中的图片是否加载完成,都会重新加载图片,从浏览器缓存机制来看:

    1, 通过 加载的图片,浏览器默认情况下会将其缓存起来。

    2, 当我们从 JS 的代码中创建的 再去访问同一个图片时,浏览器就不会再发起新的请求,而是直接访问缓存的图片。但是由于 JS 中的 设置了 crossorigin,也就意味着它将要以 CORS 的方式请求,但缓存中的图片并未设置crossorigin,所以浏览器直接就拒绝了。连网络请求都没有发起。控制台报跨域。

    但在笔者的调试过程中,在本地浏览器(浏览器并未强制跨域)使用html2canvas截图时,却并未报图片跨域,这让笔者十分困惑。浏览器加载跨域的图片资源时,响应头中参数为:Access-Control-Allow-Credentials:true

    Access-Control-Allow-Origin:0

    图片按理说应该被跨域限制无法加载成功,但神奇的是,浏览器重新又加载了一次该资源,此时响应头中的参数变为了:Access-Control-Allow-Credentials:true

    Access-Control-Allow-Origin: true

    what?

    然鹅,在测试环境中,图片资源只会加载一次,便直接报跨域的错。

    经笔者仔细观察,才发现原来在本地的chrome浏览器的network面板中,默认勾选了disable cache 选项。从我们上面的分析中的第2点来看,此时浏览器不访问缓存,浏览器重新发起了请求并且 JS 的 正常的请求到了图片。

    不过,浏览器为何会多次发起本来不支持cors的图片资源,且成功的访问到了资源,disable cache选项确实还是给笔者留下了深深的困惑,因此记录下来,警示后者。

    更多相关内容
  • html2canvas.js

    2017-09-01 20:42:57
    html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 html2canvas.js html 截图 成 图片 ...
  • 通过纯JS插件对浏览器端的页面进行截图,截图之后再进行保存下载。
  • html2Canvas演示

    2016-12-14 17:57:01
    html2Canvas可以截取网页中的整体或者某部分,然后输出为图片
  • html2canvas.js--自定义高度

    热门讨论 2017-01-12 14:16:03
    修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
  • html2canvas.js 下载

    千次下载 热门讨论 2016-04-13 09:23:02
    html2canvas.js 和html2canvas.min.js 以及应用示例
  • html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
  • 使用html2canvas技术把页面截取成图片形式保存到本地
  • html2canvas页面指定标签截图

    热门讨论 2012-08-29 17:20:55
    利用html5中的canvashtml2canvas指定页面标签截图,利用jquery将图片编码给后台,后台再编译成指定的图片格式,jquery.plugin.html2canvas.js自己写的方法里面。
  • html2canvas 使用总结

    千次阅读 2021-06-13 16:14:03
    话不多说,在实际项目中生成截图是很常见的需求,而一般的,我们都会选择使用js库来自动生成(从头造轮子太难了...),比如今天的主角:html2canvas使用先来看下如何在 vue 项目中应用的import html2canvas from ...

    话不多说,在实际项目中生成截图是很常见的需求,而一般的,我们都会选择使用js库来自动生成(从头造轮子太难了...),比如今天的主角:html2canvas

    使用

    先来看下如何在 vue 项目中应用的

    import html2canvas from "html2canvas";

    // 生成快照

    const convertToImage = (container, options = {}) => {

    // 设置放大倍数

    const scale = window.devicePixelRatio;

    // 传入节点原始宽高

    const width = container.offsetWidth;

    const height = container.offsetHeight;

    // html2canvas配置项

    const ops = {

    scale,

    width,

    height,

    useCORS: true,

    allowTaint: false,

    ...options

    };

    return html2canvas(container, ops).then(canvas => {

    // 返回图片的二进制数据

    return canvas.toDataURL("image/png");

    });

    }

    // 调用函数,取到截图的二进制数据,对图片进行处理(保存本地、展示等)

    const imgBlobData = await convertToImage(element);

    仅此而已~~~

    遇到的问题

    如果只是这样就结束了,那这也太简单了吧,但是人无完人,再美的东西也会有瑕疵,下面列举一些 html2canvas 的问题及解决办法

    1、图片跨域

    解决方案:

    设置配置项 allowTaint: false

    canvas 的 CanvasRenderingContext2D 属于浏览器的对象,如果渲染过跨域资源,浏览器就认定 canvas 已经被污染了 Taint:污点

    设置配置项 useCORS: false

    表示允许跨域资源共享,注意不能与 allowTaint 同时配置为 true

    img 标签中添加 crossOrigin = "anonymous"

    anonymous:如果使用这个值的话就会在请求 header 中带上 Origin 属性,但请求不会带上 cookie 和客户端 ssl 证书等其他的一些认证信息

    图片服务器配置 Access-Control-Allow-Origin: *

    重要的配置项,是跨域问题的根本源泉,需要后端配合

    2、截图锯齿

    解决方案:根据设备像素比进行缩放

    // 设置放大倍数

    const scale = window.devicePixelRatio;

    3、截图不全

    解决方案:截图之前将页面滚动到顶部

    document.body.scrollTop = document.documentElement.scrollTop = 0;

    const imgBlobData = await convertToImage(element);

    4、对 css3 支持不好

    html2canvas 暂不支持的 CSS 样式属性:

    background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

    解决方案:

    对于一些必要的样式,可以选择使用图片做兜底实现

    box-shadow 可以参考 这个pr,修改源码解决,但是,实际效果也不是太理想……

    5、svg 标签

    问题原因:vue-lottie 动画库渲染的标签是 svg(也可能是你自己写的 svg 标签)

    html2canvas 对于 svg 标签的支持也不尽人意,解决办法同样是用图片做兜底

    在项目中,我们是用 svg 做动画,截图的时候把动画换成一张静态图,这样只要设置要静态图的样式,截图效果还是可以接受的

    6、其他

    建议:在页面开发前尽量跟产品确认好这个页面到底要不要截图,如果需要截图,那么搬砖的时候就要注意不要使用以上 css3 特性了,否则,就后期就只能含着眼泪、咬着牙修 bug 了

    不要问我是怎么知道的~~~

    展开全文
  • HTML2CANVAS使用总结

    千次阅读 2022-03-06 06:09:45
    最近遇到了个功能,要把表单转化成图片来保存,这让我想到了一个插件HTML2CANVAS,这里给大家分享下它的用法和我使用的过程 html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本...

    前言

    最近遇到了个功能,要把表单转化成图片来保存,这让我想到了一个插件HTML2CANVAS,这里给大家分享下它的用法和我使用的过程

    html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。

    它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanvas或ExplorerCanvas技术代替实现。

    以下浏览器能够很好的支持该脚本:Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。

    20110820223646_656 

    html2canvas可以通过获取HTML的某个元素,然后生成Canvas,能让用户保存为图片。 这个项目主要是生成canvas,那么我们如果需要生成图片还需要将它转化为图片地址。

    基本语法

    html2canvas(element, options);
    
    html2canvas(document.body, {
      onrendered: function(canvas) {
        var url = canvas.toDataURL();//图片地址
        document.body.appendChild(canvas);
      },
      width: 300,
      height: 300
    });
    

    或者使用ES6的promise

     //两个参数:所需要截图的元素id,截图后要执行的函数, canvas为截图后返回的最后一个canvas
     html2canvas(document.getElementById('id')).then(function(canvas) {document.body.appendChild(canvas);});
    

    可用参数

    参数名称类型默认值描述
    allowTaintbooleanfalseWhether to allow cross-origin images to taint the canvas---允许跨域
    backgroundstring#fffCanvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色,如果没有设定默认透明
    heightnumbernullDefine the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定
    letterRenderingbooleanfalseWhether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用
    loggingbooleanfalseWhether to log events in the console.---在console.log()中输出信息
    proxystringundefinedUrl to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.---代理地址
    taintTestbooleantrueWhether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片
    timeoutnumber0Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟,默认延迟为0,单位毫秒
    widthnumbernullDefine the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度
    useCORSbooleanfalseWhether to attempt to load cross-origin images as CORS served, before reverting back to proxy--这个我也不知道是干嘛的

    例子

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>html2canvas example</title>
        <script type="text/javascript" src="html2canvas.js"></script>
    </head>
    <script type="text/javascript">
    function takeScreenshot() {
      console.log('test');
        html2canvas(document.getElementById('view'), {
            onrendered: function(canvas) {
                document.body.appendChild(canvas);
            },
          // width: 300,
          // height: 300
        });
    }
    </script>
    <body>
        <div id="view" style="background:url(test.jpg) 50%; width: 700px; height: 500px;">
            <input type="button" value="截图" onclick="takeScreenshot()">
        </div>
    </body>
    
    </html>
    

    如何在vue+ts环境调用

    前提条件

    项目安装html2canvas,jq
    
    npm install html2canvas
    npm install jquery
    

    HTML部分

    <div id="#printArea">需要打印的区域</div>  
      <div class="print">
              <iframe id='iframe' style="display:none;"></iframe>
    </div>
    

    JS部分

    页面引入 html2canvas、jquery
      import html2canvas from 'html2canvas';
           import $ from 'jquery';
     
      
      // 打印
       private onPrint() {
             const el: any = $('#printArea')[0];
             const iframe = window.frames[0];
             iframe.document.close();
             html2canvas(el, {
               scale: 1,
               width: el.offsetWidth,
               height: el.offsetHeight,
               allowTaint: true,
               useCORS: true,
             }).then(function (canvas) {
                  const context: any = canvas.getContext('2d');
                  context.mozImageSmoothingEnabled = false;
                  context.webkitImageSmoothingEnabled = false;
                  context.msImageSmoothingEnabled = false;
                  context.imageSmoothingEnabled = false;
                  const src64: any = canvas.toDataURL();
                  const newImg: any = document.createElement('img');
                  newImg.crossOrigin = 'Anonymous';
                  newImg.src = src64;
                  iframe.document.write('<img src="' + newImg.src + '" />');
                  setTimeout(() => {
                      iframe.window.print();
                  });
             });
          }
    
    

    效果图

    如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

     

    展开全文
  • html2Canvas使用总结

    千次阅读 2021-06-16 06:00:28
    最初想要自己用canvas画,但是略麻烦,后来发现了html2canvas这个插件,先将html转成canvas,再生成图片。使用起来也很简单:setTimeout(function () {html2canvas($('#img_html')[0]).then(function (c...

    需要将一个背景图+动态获取的文字+微信头像拼接成一张图片,用户可长按保存最终图片,难免就是要将html转换成图片。

    最初想要自己用canvas画,但是略麻烦,后来发现了html2canvas这个插件,先将html转成canvas,再生成图片。

    使用起来也很简单:

    setTimeout(function () {

    html2canvas($('#img_html')[0]).then(function (canvas) {

    var img = new Image()

    img.src = canvas.toDataURL('image/jpeg')

    img.style.cssText += 'position:absolute;width:100%;left:0;top:0;'

    $('#result').append(img)

    })

    }, 1000)

    但是踩坑不少,罗列如下:

    因为html是动态生成的,所以最好加上setTimeout延时转换成canvas,不然可能html的dom元素还没加载完。

    canvas.toDataURl()该方法是将canvas转成图片,如果html中有跨域请求的图片资源,那么canvas就会报错不支持跨域。所以只好将微信头像先上传到服务器的文件系统,请求图片时,带上允许跨域的响应头:Access-Control-Allow-Origin: *

    要转换成图片的 html,其css样式要有几点注意:

    亲测不能使用rem为单位定义文字大小、元素宽高等,不然无法显示该元素

    不能添加background,假如设置背景颜色为红色或者一张背景图,莫名其妙会多出一个元素,如下所示:

    e2a8a511c315

    原始html

    e2a8a511c315

    生成的图片

    4.canvas.toDataURl()生成的图片是base64的格式data:image/jpeg;base64,/9j/4AAQ...,可以直接作为img标签的src。

    但是由于是小程序内嵌H5,且图片资源过大,在某些机型(常见Ios)的微信小程序里面会限流。当生成图片,准备渲染的时候,微信要么会直接白屏,要么就是会弹框提醒:该小程序继续运行会影响微信的使用,强制退出该小程序。

    解决方法

    function dataURLtoBlob (data_url) {

    let arr = data_url.split(',')

    let mime = arr[0].match(/:(.*?);/)[1]

    let bstr = atob(arr[1])

    let n = bstr.length

    let u8arr = new Uint8Array(n)

    let blob = false

    while (n--) {

    u8arr[n] = bstr.charCodeAt(n)

    }

    try {

    blob = new Blob([u8arr], { type: mime })

    } catch (e) {}

    return blob

    }

    如上所示,可将base64转成二进制流,资源会减小1到1.5倍。

    不过在某些安卓国产机型上,不支持长按保存该二进制流图片,所以可以设置仅Ios上转换为二进制图片。

    展开全文
  • 使用html2canvas遇到的问题

    千次阅读 2021-12-27 10:44:46
    截图不全的问题2、截图区域存在动态跨域图片,导致这部分区域截图空白问题(图片跨域问题)3、兼容iOS遇到的问题1:IOS8只支持-webkit-flex布局,不支持flex布局4、兼容iOS遇到的问题2html2canvas v1.3.3版本在IOS...
  • 文中内容是在 Vue 项目中使用 html2canvas和 jspdf 插件实现将页面的内容生成 PDF,并记录在使用过程中遇到的一些问题和解决方案。文中将会贴出很多参考文章,如果各位有需要,可以前往原文章查阅。 html2canvas + ...
  • Html2Canvas调整大小

    千次阅读 2021-06-11 07:31:43
    我正在使用html2canvas努力获取网页的屏幕截图并将其呈现为缩略图(以及400x300,不完全是缩略图)。Html2Canvas调整大小如何将图像大小设置为400x300?在萤火虫我找到属性为:。但是,我无法弄清楚我的代码(下面)或...
  • html2canvas 处理跨域图片的解决方案

    千次阅读 2021-05-12 09:41:35
    html2canvas 处理跨域图片的解决方案 最近接了个开发需求,要在前端实现将页面上的部分 DOM 内容生成为一张图片的功能。调研后发现了 html2canvas 库,使用它可以非常简便的实现上述功能,它的基本原理是将要生成为...
  • 关于html2canvas生成图片空白问题 框架react + mobx "html2canvas": "^1.0.0-rc.7" ``` 111111111111111 提交 ``` ``` var node = document.querySelector('.csbox') ...
  • vue中html2canvas的使用

    千次阅读 2021-06-14 03:29:16
    html2canvas: 将dom元素转为一张图片1,装包:npm install --save html2canvas2,导入:import html2canvas from 'html2canvas';3,如果该盒子里面有从后台请求回来的图片路径 可能会存在图片跨域情况img标签里加上...
  • html2canvas截图丢失部分元素

    千次阅读 2021-06-11 13:38:22
    html2canvas截图丢失部分元素html2canvas截图丢失所选区域的部分元素//这是我须要截取的元素css //截取以后,图中会丢失一些模块请问有哪位道友遇到过相似的问题???html相关代码weblet targetDom = $('#...
  • html2canvas截图的使用

    千次阅读 2021-12-01 11:30:52
    html2canvas截图的使用 简述 html2canvas是一个脚本 这个脚本可以允许用户直接在浏览器上拍摄网页或其中一部分的"屏幕截图".屏幕截图是基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,...
  • 使用 html2canvas 将页面保存成图片

    千次阅读 2019-12-06 11:45:52
    这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示其如何使用。 一、基本介绍 1,什么是 html2canvas html2canvas 可以通过获取 HTML 的某个元素,然后生成 Canvas,从而让用户保存为图片。 ...
  • html2canvas - 在iOS设备上崩溃

    千次阅读 2021-06-14 07:58:03
    我为客户端建立了一个系统,它允许您选择或上传汽车图像,在中键入数字,然后移动/调整大小/旋转/将板倾斜到正确的位置,然后下载图像:html2canvas - 在iOS设备上崩溃这都是每次我在测试设备上精美工作,除了iPhone...
  • html2canvashtml2canvas生成海报

    千次阅读 2018-12-03 15:45:13
    html2canvas生成海报 html2canvas官网: http://html2canvas.hertzen.com/?utm_source=caibaojian.com &amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;...
  • H5:html2canvas使用笔记

    千次阅读 2020-06-05 16:12:47
    可以通过开源库html2canvas实现这一功能。 官方文档 github -> https://github.com/niklasvh/html2canvas 使用文档 -> http://html2canvas.hertzen.com/documentation 安装 //这里最好指定安装版本...
  • vue中html2canvas的使用(地图截图)

    千次阅读 2021-06-17 10:23:31
    1,下载html2canvas插件npm install --save html2canvas2,引入html2canvasimport html2canvas from 'html2canvas';1,图片的格式转换public dataURLToBlob(dataurl: any): any {const arr = dataurl.split(',');...
  • html2canvas截长图

    千次阅读 2020-11-18 21:59:12
    一、下载运行后选择下图的html2canvas即可直接去到路由界面测试 二、下图是html2canvas路由页面,点击右上角的生成图片即可下载长图 三、源码路径(html2canvas源码github) 四、源码(关键在generateImage 这个...
  • 实现网页页面截屏,并且将其转换为指定图片格式保存下来,需要使用到html2canvas.js。...将其转换为canvas标签画布,然后使用Canvas2Image.js控件的convertToImage方法(也可以使用canvas的toDa...
  • html2canvas的问题及应用

    千次阅读 2020-06-04 15:24:02
    1.安装方式 1.1 npm 安装 ...script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> 2.使用方式 2.1 HTML <div id="capture" style="pad

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 192,997
精华内容 77,198
关键字:

html2canvas