给canvas截图并保存

需求是把网页给截图并保存下来,搜了下有两个 js,一个是 html2canvas,另一个是 canvas2image。

刚开始用 canvas2image,遇到一堆问题,最后还是换了 html2canvas。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var canvas = document.getElementsByTagName('canvas')[0];
html2canvas(document.body, {
width: 720,
height: 480
}).then(function (canvas) {
console.log("???")
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
var a = document.createElement('a');
a.href = image;
a.download = '860_rain.png';
a.click();
}
);
// Canvas2Image.saveAsPNG(canvasObj, 720, 480);
}

然而貌似打开图片之后是缩放了的…… 这个 720x480 其实是把原图裁了一部分……

还没搞清楚怎么让它不缩放我的图片……

貌似不能用 js 来 resize 一个 canvas,似乎只能在加载图片的时候就这么搞。

然后还顺便发现一个神奇的事情,如果不停地下载同一个文件名的文件…… 它至多能下 100 次。就是会有 download, download (1), 一直到 download (100)。然后就下不下来了……