在一些社群网站,常常会碰到问题、流动、商品的信息分享,这种分享通常是以海报的模式发送给好友或保留到本地。在这种场景下,海报必定是动态变化的,所以咱们要动静的渲染内容并生成图片,海报其实就是图片。
官网:html2canvas
海报示例:
介绍
理解 html2canvas
,它是如何工作的以及它的一些局限性。
在你开始应用这个脚本以前,这里有些帮忙你更好的理解脚本的益处及其的一些局限性。
对于
html2canvas
是一个 HTML
渲染器。该脚本容许你间接在用户浏览器截取页面或局部网页的“屏幕截屏”,屏幕截图是基于 DOM
,因而生成的图片并不一定 100%
统一,因为它没有制作理论的屏幕截图,而是依据页面上可用的信息构建屏幕截图。
它是如何工作的
该脚本通过读取 DOM
以及利用于元素的不同款式,将以后页面出现为 canvas
图像。
它不须要来自服务器的任何渲染,因为整个图像是在客户端上创立的。然而,因为它太依赖于浏览器,因而该库不适宜在 nodejs
中应用。它也不会神奇地躲避任何浏览器内容策略限度,因而出现跨域内容将须要代理来将内容提供给雷同的源。
开始
筹备工作
装置依赖
npm install html2canvas
在须要的页面引入依赖
import html2canvas from 'html2canvas'
而后就能够应用html2canvas
相干API
了。
定义海报构造
在应用之前咱们要先定义好页面,咱们先在页面上写好海报的html
<view class="html2canvas"> <view class="poster_title"> 海报题目 </view> <view class="img_box"> <img class="img_case" src="http://image.gwmph.com/weican/2024/02/27/695aa1d4c2394be48925a6858dd68e9d.jpg" alt="" /> </view> <view class="poster_title" @click="getPoster()"> 确定分享 </view></view>
.html2canvas{ padding: 20rpx; .poster_title{ text-align: center; } .img_box{ display: flex; justify-content: space-around; margin: 10rpx 0; .img_case{ width: 300rpx; height: 300rpx; } } }
script局部
在这里咱们要辨别两种script
类型,一种失常的,一种是renderjs
在一个页面中script
能够有多个,它也能够写在任意地位,如果咱们做失常的逻辑操作,能够在一般的script
中编码;如果咱们要对页面进行交互,请应用renderjs
。
renderjs
是一个运行在视图层的js
。它比WXS
更加弱小。它只反对app-vue
和web
。renderjs
的次要作用有2
个:
- 大幅升高逻辑层和视图层的通信损耗,提供高性能视图交互能力
- 在视图层操作dom,运行 for web 的 js库
<script module="html2canvas" lang="renderjs">import html2canvas from 'html2canvas'; // 引入html2canvasexport default { methods: { async getPoster() { try { const dom = document.querySelector('.html2canvas'); const canvas = await html2canvas(dom,{ width: dom.offsetWidth,//设置canvas尺寸与所截图尺寸雷同,避免白边 height: dom.offsetHeight,//避免白边 logging: true, // 是否尝试记录日志 useCORS: true, // 是否尝试应用CORS从服务器加载图像,解决图片跨域 scale: 4, // 缩放比例,解决含糊问题,数值越大越高清 dpi: 600, // 分辨率,,解决含糊问题,数值越大越高清 }); const base64 = canvas.toDataURL('image/jpeg', 1); console.log('生成的图片',base64); } catch(error){ console.log(error) } } }}</script>
点击确定分享,咱们则会调用getPoter
来生成图片,canvas.toDataURL
生成的图片为base64
格局,上面是生成后的内容:
而后咱们通过a标签
图片进行下载,上面是生成海报并下载的残缺逻辑。
<script module="html2canvas" lang="renderjs">import html2canvas from 'html2canvas'; // 引入html2canvasexport default { methods: { async getPoster() { try { const dom = document.querySelector('.html2canvas'); // 获取dom const canvas = await html2canvas(dom,{ width: dom.offsetWidth,//设置canvas尺寸与所截图尺寸雷同,避免白边 height: dom.offsetHeight,//避免白边 logging: true, // 是否尝试记录日志 useCORS: true, // 是否尝试应用CORS从服务器加载图像,解决图片跨域 scale: 4, // 缩放比例 dpi: 600, // 分辨率 }); const base64 = canvas.toDataURL('image/jpeg', 1); let a = document.createElement('a'); // 创立a标签 a.href = base64; // 增加href属性,也就是url a.download = "posterName.png" // 设置下载名称 a.click(); // 模仿点击,下载图片 } catch(error){ console.log(error) } } }}</script>
上面就是下载下来的图片
注意事项
1、多个script
<script> export default { name: 'html2canvas', props: { }, methods: { } }</script> <script module="html2canvas" lang="renderjs">import html2canvas from 'html2canvas';export default { methods: { }}</script>
在uniapp
中,咱们如果想要提供逻辑层和视图层的通信效率,可能会应用renderjs
,你可能会在页面中看到多个script
,这是失常的,咱们可能会将生成海报的性能封装成组件,通过组件传参的形式在多个页面复用,这种构造页面就可能有两个script
,一个是失常的vue
的scrpit
,用于解决失常逻辑以及接管传参和事件等,一个是用于视图层通信的renderjs
2、html2canvas不要用image标签
咱们在生成图片的时候,可能会调整清晰度和分辨率,让画面更高清,html2canvas
应该应用img
标签,而不是image
标签,image
标签不会对html2canvas
的scale
、dpi
失效。
3、html2canvas对于当初的css高级属性的反对
html2canvas
可能不会反对css
高级属性,例如:
● background-blend-mode
● border-image
● box-decoration-break
● box-shadow
● filter
● font-variant-ligatures
● mix-blend-mode
● object-fit
● repeating-linear-gradient()
● writing-mode
● zoom
● ......
对于突变文字裁切之类的高阶属性可能不反对,如果海报生成的时候没有失效,那就是不反对,须要思考代替计划。
最初
1、html2canvas
是基于html
的渲染器,只有定义好海报构造即可生成,能够看成html2canvas
就是将页面构造转换成图片。
2、不要应用image
标签,应该应用img
标签。
3、不反对局部css
高阶属性。
如果你感觉本文章不错,欢送点赞、珍藏、转发✨哦~
浏览其它:
hex和rgb色值转换-色调加深减淡
微信小程序图片压缩原来这么easy!
递归组件组合拳,无惧页面嵌套
微信小程序动静生成表单来啦!你再也不须要手写表单了!
微信小程序用户隐衷API