庆双节迎亚运，华为云Astro Canvas邀您来助力！九月是收获与忙碌的季节。在中秋、国庆双节将至的时候，杭州第19届亚运会也开启在即，在这繁忙的季节里，华为云低代码平台Astro想要邀请您一起来为这些美好的节日送上祝福，通过华为云大屏应用Astro Canvas，设计围绕中秋节、国庆节和杭州亚运会主题的专属的，个性化的，独一无二的大屏应用，用自己力所能及的力量为节日祝福，为亚运呐喊助威！ 活动主题：中秋、国庆、亚运会主题活动个性化大屏设计 （三个主题任选其一）活动时间：9月19日-10月20日活动介绍：华为云Astro Canvas提供丰富的组件应用，简单快捷的数据接入，能够让全民开发者在不用写一行代码，不用了解繁琐的操作流程下，通过简单的拖拉拽的方式，快速设计完成一个活动大屏，它既可以像学生时代设计的黑板报，又可以像从前时光漫漫用心编辑的个人空间，还可以是一个专业的、有技术含量的大屏展示……，一切发挥您的创意和想象力！ 活动示例：中秋节主题大屏设计使用组件：地图，排行榜，文本编辑，标题，轮播图，热力图，时间等。数据：通过Excel表格，创建静态数据数据集。打开如下连接进行访问作品，访问码：Ab123456@作品链接：https://dc05423683734facb8973f150a53e2c1.canvas.cn-north-4.hwastro.cn/magno/render/share/18a9d28ea95-34494e71-9db3-4b13-92c9-78f48d426033（仅支持PC端访问）活动流程：第一步：免费注册Canvas，链接如下cid:link_1第二步：下载附件（请登录后方可见本帖附件）”华为云Astro Canvas（中秋节设计大屏）-操作手册2.0“能够围绕活动主题，使用Astro Canvas产品，完成大屏设计作品； 第三步：将个人作品发布到评论区回帖，主要包括以下内容（可参考上方活动示例）：设计页面截图 使用的组件和数据接入方式页面分享链接分享码禁止上传违法违规的内容和图片；活动奖励：1、活动期间，论坛提交作品总数量超过5份，即开启论坛抽奖抽奖方式：满足抽奖资格之后，等活动结束时，会有小助手私信发抽奖链接，请注意查收本论坛私信参与抽奖；2、活动结束后，我们将从提交的作品中，评选出排名前三最佳设计作品。注：一个帐号只能有一个作品参与评选最佳作品评选维度：1) 使用组件个数2) 使用组件配置难度（是否进行精细化配置、是否尝试复杂组件）3) 数据接入难度（比如使用数据集、桥接器）4) 整体样式&场景是否完善5)其他功能的发掘程度（比如修改自适应）奖项设置及发放：奖项设置奖品优秀作品奖100元京东卡提交作品论坛抽奖华为手环4长款鼠标垫魔方文化短袖衫笔记本运动京巾案例学院卡（虚拟）以上活动奖励，优秀作品奖在评选结果公布后2个工作日内发放；论坛抽奖在抽奖结果公布后2个工作日内发放。>>产品体验入口（先领取免费资源再体验，具体参考：附件华为云Astro Canvas（中秋节设计大屏）-操作手册2.0 ）关于华为云Astro Canvas：华为云Astro大屏应用Astro Canvas，以数据可视技术为核心，以屏幕轻松编排，多屏适配可视为基础，帮助非专业开发者通过图形化界面轻松搭建专业水准的数据可视化大屏应用，满足项目运营管理，业务监控，风险预警等多种业务场景下的一站式数据实时可视化大屏展示需求。以上活动解释权归华为云Astro所有！

话不多说，在实际项目中生成截图是很常见的需求，而一般的，我们都会选择使用js库来自动生成（从头造轮子太难了...），比如今天的主角：html2canvas使用先来看下如何在 vue 项目中应用的import html2canvas from "html2canvas"; // 生成快照 const convertToImage = (container, options = {}) => { // 设置放大倍数 const scale = window.devicePixelRatio; // 传入节点原始宽高 const _width = container.offsetWidth; const _height = container.offsetHeight; let { width, height } = options; width = width || _width; height = height || _height; // 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: falsecanvas 的 CanvasRenderingContext2D 属于浏览器的对象，如果渲染过跨域资源，浏览器就认定 canvas 已经被污染了 Taint：污点设置配置项 useCORS: false表示允许跨域资源共享，注意不能与 allowTaint 同时配置为 trueimg 标签中添加 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 了不要问我是怎么知道的~~~原文链接：https://www.jianshu.com/p/e74dab30ea2c

安装canvas安装依赖yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel python3 -y编译安装npm install canvas查看canvasnpm view canvas

安装canvas安装依赖yum install gcc-c++ cairo-devel pango-devel libjpeg-turbo-devel giflib-devel python3 -y编译安装npm install canvas查看canvasnpm view canvas