共计 3537 个字符，预计需要花费 9 分钟才能阅读完成。
在一些社群网站，常常会碰到问题、流动、商品的信息分享，这种分享通常是以海报的模式发送给好友或保留到本地。在这种场景下，海报必定是动态变化的，所以咱们要动静的渲染内容并生成图片，海报其实就是图片。
官网：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'; // 引入 html2canvas
export 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'; // 引入 html2canvas
export 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