質問編集履歴

1

実現したいことと現状の状況を明確にしました

2017/07/04 07:25

投稿

YukiAbe
YukiAbe

score0

test CHANGED
File without changes
test CHANGED
@@ -1,231 +1,35 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- http://cartman0.hatenablog.com/entry/2015/05/29/173343
3
+ https://goo.gl/roiiYJ
4
4
 
5
+ この質問にあるような実装を行いたいです。
6
+
5
- 上記のCSSアニメーションで表示される立方体”動保存できるようにたいです。
7
+ ただ、ボタンをクリックした時にHTML指定タグ範囲内にあるCSSアニメーションを画し、ユーザーが保存できるようにリンクを生成させたいです。
6
8
 
7
9
 
8
10
 
9
- 流れを言うと、
11
+ ```JavaScript
10
12
 
11
- 1、Webページに立方体アニメーションを表示
13
+ function screenshot( selector) {
12
14
 
13
- 2、アニメーションが表示されるエリアをページ読み込み時に10秒ほどキャプチャ
15
+ var element = $(selector)[0];
14
16
 
17
+ html2canvas(element).then(function(canvas) {
18
+
19
+ var imgData = canvas.toDataURL();
20
+
21
+ $.post("post_screenshot.php", {dataurl: imgData}, function (res_code) {
22
+
15
- 3、キャプチャした動画を保存できるリンクを生成し、表示
23
+ window.alert( res_code);
24
+
25
+ });
26
+
27
+ });
28
+
29
+ }
30
+
31
+ ```
16
32
 
17
33
 
18
34
 
19
- 現状、立方体をアニメーションで表示させることはできましたが、それをどのように動画として保存すればいいのか手順が全くわからない現状です。できればJavaScriptを使って実装を行いたいです。
20
-
21
-
22
-
23
- どのような方法ありまでしょうか?
35
+ 具体的な方法などありましたら教えていただけませんでしょうか?
24
-
25
- 漠然とした質問で申し訳ありません。よろしくおねがいします。
26
-
27
-
28
-
29
-
30
-
31
- ###現状のコード
32
-
33
- ```HTML
34
-
35
- <div class="cube">
36
-
37
- <div class="surface front">front</div>
38
-
39
- <div class="surface right">right</div>
40
-
41
- <div class="surface left">left</div>
42
-
43
- <div class="surface top">top</div>
44
-
45
- <div class="surface bottom">bottom</div>
46
-
47
- <div class="surface back">back</div>
48
-
49
- </div>
50
-
51
- ```
52
-
53
- ```CSS
54
-
55
- body {
56
-
57
- width: 100%;
58
-
59
- transform-style: preserve-3d;
60
-
61
- -webkit-transform-style: preserve-3d;
62
-
63
- perspective: 200px;
64
-
65
- -webkit-perspective: 200px;
66
-
67
- }
68
-
69
-
70
-
71
- .cube {
72
-
73
- width: 1px;
74
-
75
- height: 1px;
76
-
77
- margin: 100px auto;
78
-
79
- transform-style: preserve-3d;
80
-
81
- -webkit-transform-style: preserve-3d;
82
-
83
- border: 5px solid red;
84
-
85
- position: relative;
86
-
87
- }
88
-
89
-
90
-
91
- .surface {
92
-
93
- width: 100px;
94
-
95
- height: 100px;
96
-
97
- background: rgba(255, 0, 0, 0.1);
98
-
99
- border: 2px solid gray;
100
-
101
- position: absolute;
102
-
103
- left: calc(-100px / 2);
104
-
105
- top: calc(-100px / 2);
106
-
107
- text-align: center;
108
-
109
- line-height: 100px;
110
-
111
- }
112
-
113
-
114
-
115
- /* 面個別CSS */
116
-
117
- .front {
118
-
119
- transform:
120
-
121
- translateZ(calc(100px / 2));
122
-
123
- -webkit-transform:
124
-
125
- translateZ(calc(100px / 2));
126
-
127
- }
128
-
129
- .back {
130
-
131
- transform:
132
-
133
- translateZ(calc(-100px / 2)) rotateY(180deg);
134
-
135
- -webkit-transform:
136
-
137
- translateZ(calc(-100px / 2)) rotateY(180deg);
138
-
139
- }
140
-
141
- .right {
142
-
143
- transform:
144
-
145
- translateX(calc(100px / 2)) rotateY(90deg);
146
-
147
- -webkit-transform:
148
-
149
- translateX(calc(100px / 2)) rotateY(90deg);
150
-
151
- }
152
-
153
- .left {
154
-
155
- transform:
156
-
157
- translateX(calc(-100px / 2)) rotateY(-90deg);
158
-
159
- -webkit-transform:
160
-
161
- translateX(calc(-100px / 2)) rotateY(-90deg);
162
-
163
- }
164
-
165
- .top{
166
-
167
- transform:
168
-
169
- translateY(calc(-100px / 2)) rotateX(90deg);
170
-
171
- -webkit-transform:
172
-
173
- translateY(calc(-100px / 2)) rotateX(90deg);
174
-
175
- }
176
-
177
- .bottom{
178
-
179
- transform:
180
-
181
- translateY(calc(100px / 2)) rotateX(-90deg) ;
182
-
183
- -webkit-transform:
184
-
185
- translateY(calc(100px / 2)) rotateX(-90deg) ;
186
-
187
- }
188
-
189
-
190
-
191
- /* アニメーション */
192
-
193
- .cube {
194
-
195
- animation: rotation 10s linear 0s infinite normal;
196
-
197
- -webkit-animation: rotation 10s linear 0s infinite normal;
198
-
199
- }
200
-
201
-
202
-
203
- /* キーフレーム */
204
-
205
- @keyframes rotation{
206
-
207
- 100%{
208
-
209
- transform:
210
-
211
- rotateX(360deg) rotateY(360deg);
212
-
213
- }
214
-
215
- }
216
-
217
- @-webkit-keyframes rotation{
218
-
219
- 100%{
220
-
221
- -webkit-transform:
222
-
223
- rotateX(360deg) rotateY(360deg);
224
-
225
- }
226
-
227
- }
228
-
229
-
230
-
231
- ```