html2canvas根据div大小生成图片
时间: 2023-07-11 12:32:58 浏览: 231
要根据div的大小生成图片,可以使用html2canvas的`options`参数中的`width`和`height`属性来指定生成的图片的大小。具体可以按照以下步骤操作:
1. 获取要生成图片的div元素的宽度和高度。
```
const div = document.querySelector('#target-div');
const width = div.offsetWidth;
const height = div.offsetHeight;
```
2. 创建一个canvas元素,设置其宽高为要生成图片的宽度和高度。
```
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
```
3. 调用html2canvas函数,将要生成图片的div元素作为参数传入,并指定生成图片的宽度和高度。
```
html2canvas(div, {
width: width,
height: height
}).then(function(canvas) {
// 在这里处理生成的canvas图像
});
```
4. 在生成图片成功后,可以将canvas元素转为图片并显示出来。
```
const dataUrl = canvas.toDataURL('image/png');
const img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
```
这样就可以根据div的大小生成对应尺寸的图片了。
阅读全文