使用html2canvans截图的页面如何添加图片水印能够平铺到画布上并且旋转45度
时间: 2024-03-15 10:45:45 浏览: 47
你可以使用以下代码实现在使用html2canvas截图的页面上添加图片水印并旋转45度:
```javascript
// 创建一个canvas元素
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 使用html2canvas将页面截图并将结果绘制到canvas上
html2canvas(document.body).then(function (canvas) {
// 获取绘制结果的上下文
var context = canvas.getContext("2d");
// 添加水印图片
var watermark = new Image();
watermark.src = "path/to/watermark.png";
watermark.onload = function () {
// 设置水印平铺
var pattern = context.createPattern(watermark, "repeat");
context.fillStyle = pattern;
// 旋转画布45度
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(45 * Math.PI / 180);
context.translate(-canvas.width / 2, -canvas.height / 2);
// 绘制水印
context.fillRect(0, 0, canvas.width, canvas.height);
// 将结果导出为图片并下载
var link = document.createElement("a");
link.download = "screenshot.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
link.click();
};
});
```
这段代码首先创建一个与窗口大小相同的canvas元素,使用html2canvas截取页面的截图并将结果绘制到canvas上。接着,将水印图片加载到内存中,并在canvas上绘制平铺的水印,最后将整个画布旋转45度,再将结果导出为图片并下载。