-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas1.html
61 lines (50 loc) · 1.85 KB
/
canvas1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas保存图片</title>
</head>
<body>
<style>
#demo {width: 100px;background: #ccc;color: #fff;}
#scream {height: 277px;}
</style>
<p>Image to use:</p>
<div id="demo" style="height: 100px;">123</div>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220"><p>Canvas:</p>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;"></canvas>
<p>image</p>
<img src="" id="imgN"/>
<script>
// drawImage() 各个参数说明
// img 规定要使用的图像、画布或视频。
// sx 可选。开始剪切的 x 坐标位置。
// sy 可选。开始剪切的 y 坐标位置。
// swidth 可选。被剪切图像的宽度。
// sheight 可选。被剪切图像的高度。
// x 在画布上放置图像的 x 坐标位置。
// y 在画布上放置图像的 y 坐标位置。
// width 可选。要使用的图像的宽度。（伸展或缩小图像）
// height 可选。要使用的图像的高度。（伸展或缩小图像）
window.onload=function(){
var c=document.getElementById("myCanvas");
var d=document.getElementById("demo");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
var imgN=document.getElementById("imgN");
// img.onload = function() {
ctx.drawImage(img,100,100,100,100,0,0,100,100); // 把图片的一部分画到canvas里面去
image= c.toDataURL("image/png"); // 保存canvas 将转换成base64位格式的图片
// imgN.setAttribute("src",image);
imgN.src=image;
console.log(c.clientHeight); // 可视区域高度 不包括边框
console.log(c.offsetHeight); // 包括边框
console.log(c.height); // 能获取img和canvas的高度 但是不能获取div的高度
console.log(d.height); // undefined
console.log(d.getComputedStyle())
// }
}
// 注意：要在服务器环境下运行
</script>
</body>
</html>