正文

html2canvas用法及部分踩坑实录(代码片段)

杭州-前端-求内推  杭州-前端-求内推  2023-01-28  618

关键词：

什么是 html2canvs?

html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。

它的屏幕截图是基于 DOM 的，因此可能不会 100% 精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

html2canvas 可以用来做什么

从上的面的介绍可以知道， html2canvas 的作用就是根据 DOM 生成对应的图片，所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。

如何使用 html2canvas

let html2canvas = null;

export default 
  beforeMount() 
    import('html2canvas').then((plugin) => 
      html2canvas = plugin.default;
    );
  ,
  methods: 
    // 获取分享图片 base64
    getShareImgBase64() 
      return new Promise((resolve) => 
        setTimeout(() => 
          // #capture 就是我们要获取截图对应的 DOM 元素选择器
          html2canvas(document.querySelector('#capture'), 
            useCORS: true, // 【重要】开启跨域配置
            scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
            allowTaint: true, // 允许跨域图片
          ).then((canvas) => 
            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            resolve(imgData);
          );
        , 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
      );
    ,
  ,
;

常见问题总结

图片跨域

我们在进行图片保存的时候经常会发现图片跨域了

这个时候我们去看它的请求，可以看到它本身就没有做跨域的相关配置。

对于允许跨域的图片我们可以在 Headers 里面看到

Access-Control-Allow-Origin:*

对于这个问题，最简单的解决方案就是直接在所在图片的 img 标签里面加上 crossOrigin = "anonymous"，即：

<img crossorigin="anonymous" src="xxx" >

在某些情况下如果你发现加上 crossOrigin = "anonymous" 之后，图片显示不出来了，此时给图片的 url 中拼上一个随机字符串即可。

<img crossorigin="anonymous" :src="`xxx?_=$Date.now()`" >

当然，想要永久的解决这个问题需要后端同学配合在图片服务器上设置图片服务器配置 Access-Control-Allow-Origin: *。

本地图片统跳调试正常，上线之后APP中无法显示

这个问题比较蛋疼，目前也没找到导致该问题的具体原因，经过尝试之后一个可行的解决方案是将本地图片上传至 OSS，然后在 img 的 src 属性中加上时间戳，即：

<img crossorigin="anonymous" :src="`xxx?_=$Date.now()`">

截图不全

要解决这个问题，我们只需要在截图之前将页面滚动到顶部即可

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

可

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

html2canvas用法及部分踩坑实录(代码片段)

什么是html2canvs?html2canvas的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。它的屏幕截图是基于DOM的，因此可能不会100%精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可... 查看详情

quartz定时任务中日志切面踩坑实录(代码片段)

一，背景介绍　　系统较为复杂，现拆解日志切面部分，表述如下　　1，A定时任务执行之前，记录开始日志　　2，执行成功，记录成功日志，同时获取执行方法的结果　　3，执行失败，记录失败日志。二，代码结构　　　直... 查看详情

ffmpeg踩坑实录(代码片段)

一、背景介绍最近领导要求做一个视频录制的相关项目。其中，需要对视频文件进行添加实时时间水印。于是，我想到了使用之前的ffmpeg来做。二、ffmpeg实际操作首先把需要添加水印的视频文件，... 查看详情

aop踩坑实录(spring生成proxy)(代码片段)

AOP踩坑实录(Spring生成Proxy)--洱涷zZ背景：因为想深层次的去看看Spring的AOP机制，所以查阅了很多资料，其中在复现廖雪峰老师写的demo的时候遇到的一个NullPointerException记录一下。AOP：无论是使用AspectJ语法... 查看详情

chromium内核浏览器编译记踩坑实录(代码片段)

...客往期回顾：Chromium内核浏览器编译记（一）踩坑实录Chromium内核浏览器编译记（二）UI定制0.写在前面本篇文章是用来记录编译Chromium 查看详情

aop踩坑实录(spring生成proxy)(代码片段)

移动端视频踩坑实录(代码片段)

最近刚结束一个移动端涉及视频播放的小项目，踩了不少坑，现记录在此：1、ios系统中让视频宽高都100%铺满所在父层设置width="100%"height="100%"在ios中是无法实现宽高都100%的，应该设置video的样式：width:100%;height:100%;object-fit:fill;&nb... 查看详情

chromium内核浏览器编译记踩坑实录(代码片段)

...客往期回顾：Chromium内核浏览器编译记（一）踩坑实录Chromium内核浏览器编译记（二）UI定制0.写在前面本篇文章是用来记录编译Chromium源码的步骤和踩过的坑，以防止后续再用到的时候忘记，同时也希望... 查看详情

gitee开源程序kkfileview踩坑及解决方案(代码片段)

...前言一、依赖选择二、环境部署安装2.1解压2.2启动程序2.3踩坑--------office.home配置有误2.4踩坑问题解决三、踩坑-------OFFICE组件不可用3.1确认是否是office组件的问题3.2验证office组件是否不可用3.3验证office组件是否可用四、踩坑-------... 查看详情

jenkinspipeline的语法实例介绍及踩坑记录(代码片段)

本文介绍一下Jenkinspipeline的语法实例介绍及踩坑记录废话不多说，直接上案例pipelineagentanystagesstage(‘download‘)stepsecho‘Thisisabuildstep‘gitcredentialsId:‘0c3d0852-8a03-42e2-a893-a445308a257b‘,url:‘http://192.168.0.6/softwa 查看详情

亿级流量高并发秒杀系统商品“超卖”了，只因使用的jdk同步容器中存在这两个巨大的坑！！（踩坑实录，建议收藏）(代码片段)

大家好，我是冰河~~关注冰河的CSDN博客，学习最牛逼的【精通高并发系列】专栏。说实话，在实际的工作过程中，我在使用JDK中的并发容器时，确实踩过不少坑。为了让小伙伴们更好的消化这些知识，今天... 查看详情

亿级流量高并发秒杀系统商品“超卖”了，只因使用的jdk同步容器中存在这两个巨大的坑！！（踩坑实录，建议收藏）(代码片段)

maven环境踩坑及完整配置(代码片段)

文章目录一、错误描述二、解决三、完整配置一、错误描述mavenCouldnottransferartifactXXXfromtoXXX(XXX)Notauthorized,ReasonPhraseUnauthorized.在公司使用maven私服时出现上述错误，检查配置已经配置了snapshots、releases的认证。二、解决由于公... 查看详情

springboot+junit踩坑：部分service注入失败(代码片段)

SpringBoot+Junit踩坑：部分Service注入失败问题分析问题测试类JerryServiceImplTest中的DemoService可以自动注入。但是DemoService中依赖的其他service却没法自动注入。分析最开始单独测试DemoService为了加快效率，就没启动Spring。而... 查看详情

html2canvas的踩坑之路

html2canvas的踩坑之路前言早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期.html2canvas介绍html2canvas的详细介绍可以点击... 查看详情

fastlane一键打包/发布app-使用记录及踩坑(代码片段)

最近有空,搞一搞fastlane一键打包发布Appstore/testflight/fir.com相关资料安装fastlanebrewinstallfastlanefastlane的安装和使用Fastlane官方文档fastlane自动化打包(android)fastlane-fastfile一些基础idea使用vscode,可以安装一些代码片段插件,快速上手如何... 查看详情

macsed使用踩坑实录

[转自别处]比如我sed想做文件原地的替换，但是怎么写都出错，错误提示还莫名其妙，后来多方搜索才知道Mac上的sed如果参数有-i就必须加上备份指令，即-i后添加任意字符，那些字符就作为备份文件的后缀名，可耻的man上却写得... 查看详情