Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
cqiang1993
AR.js
提交
e3ad502a
A
AR.js
项目概览
cqiang1993
/
AR.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
AR.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e3ad502a
编写于
5月 26, 2017
作者:
J
Jerome Etienne
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
added PDF generation
上级
e855014f
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
70 addition
and
37 deletion
+70
-37
three.js/examples/markerGenerator/examples/generator.html
three.js/examples/markerGenerator/examples/generator.html
+70
-37
未找到文件。
three.js/examples/markerGenerator/examples/generator.html
浏览文件 @
e3ad502a
<!DOCTYPE html>
<!-- include mdl -->
<link
rel=
"stylesheet"
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
>
<link
rel=
"stylesheet"
href=
"https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
>
<script
defer
src=
"https://code.getmdl.io/1.3.0/material.min.js"
></script>
<link
href=
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel=
"stylesheet"
>
<link
rel=
'stylesheet'
href=
'https://fonts.googleapis.com/icon?family=Material+Icons'
>
<link
rel=
'stylesheet'
href=
'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'
>
<script
defer
src=
'https://code.getmdl.io/1.3.0/material.min.js'
></script>
<link
href=
'https://fonts.googleapis.com/icon?family=Material+Icons'
rel=
'stylesheet'
>
<!-- Include pdfMake - http://pdfmake.org/ -->
<script
src=
'../../vendor/pdfMake/pdfmake.min.js'
></script>
<script
src=
'../../vendor/pdfMake/vfs_fonts.js'
></script>
<script
src=
"../threex-arpatternfile.js"
></script>
<!-- include THREEx.ArPatternFile -->
<script
src=
'../threex-arpatternfile.js'
></script>
<style
media=
"screen"
>
<style
media=
'screen'
>
body
{
font-family
:
arial
;
background-color
:
#eee
;
...
...
@@ -32,34 +36,40 @@
<body>
<h1><a
href=
'https://github.com/jeromeetienne/ar.js'
target=
'_blank'
>
AR.js
</a>
Marker Generator
</h1>
<div
class=
"mdl-grid"
>
<div
class=
"mdl-cell mdl-cell--2-col"
></div>
<div
class=
"mdl-cell mdl-cell--4-col"
>
<label
id=
'buttonUpload'
for=
"fileinput"
class=
"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
>
<input
type=
"file"
id=
"fileinput"
style=
'display: none'
>
<div
class=
'mdl-grid'
>
<div
class=
'mdl-cell mdl-cell--4-col'
>
<label
id=
'buttonUpload'
for=
'fileinput'
class=
'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'
>
<input
type=
'file'
id=
'fileinput'
style=
'display: none'
>
Upload
</label>
<div
class=
"mdl-tooltip"
for=
"buttonUpload"
>
<div
class=
'mdl-tooltip'
for=
'buttonUpload'
>
Upload the image to put inside the marker
</div>
</div>
<div
class=
"mdl-cell mdl-cell--4-col"
>
<button
id=
'buttonDownloadEncoded'
class=
"mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"
>
<div
class=
'mdl-cell mdl-cell--4-col'
>
<button
id=
'buttonDownloadEncoded'
class=
'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'
>
Download
</button>
<div
class=
"mdl-tooltip"
for=
"buttonDownloadEncoded"
>
<div
class=
'mdl-tooltip'
for=
'buttonDownloadEncoded'
>
Download marker encoded from the uploaded image
</div>
</div>
<div
class=
"mdl-cell mdl-cell--2-col"
></div>
<div
class=
'mdl-cell mdl-cell--4-col'
>
<button
id=
'buttonDownloadPDF'
class=
'mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'
>
PDF
</button>
<div
class=
'mdl-tooltip'
for=
'buttonDownloadPDF'
>
Download markers as PDF - Nice to print
</div>
</div>
</div>
<div
class=
"mdl-grid"
>
<div
class=
"mdl-cell mdl-cell--3-col"
></div>
<div
class=
"mdl-cell mdl-cell--6-col"
>
<div
class=
'mdl-grid'
>
<div
class=
'mdl-cell mdl-cell--3-col'
></div>
<div
class=
'mdl-cell mdl-cell--6-col'
>
<div
id=
'imageContainer'
></div>
</div>
<div
class=
"mdl-cell mdl-cell--3-col"
></div>
<div
class=
'mdl-cell mdl-cell--3-col'
></div>
</div>
...
...
@@ -67,9 +77,10 @@
<script>
var
innerImageURL
=
null
var
fullMarkerURL
=
null
// document.querySelector('#buttonDownloadImage').addEventListener('click', downloadFullMarkerImage)
innerImageURL
=
'
http://127.0.0.1:8080/three.js/examples/markerGenerator/examples/images/inner-arjs.png
'
updateFullMarkerImage
()
document
.
querySelector
(
'
#buttonDownloadEncoded
'
).
addEventListener
(
'
click
'
,
function
(){
if
(
innerImageURL
===
null
){
alert
(
'
upload a file first
'
)
...
...
@@ -88,20 +99,7 @@
var
reader
=
new
FileReader
();
reader
.
onload
=
function
(
event
){
innerImageURL
=
event
.
target
.
result
THREEx
.
ArPatternFile
.
buildFullMarker
(
innerImageURL
,
function
onComplete
(
markerUrl
){
fullMarkerURL
=
markerUrl
var
fullMarkerImage
=
document
.
createElement
(
'
img
'
)
fullMarkerImage
.
src
=
fullMarkerURL
fullMarkerImage
.
addEventListener
(
'
click
'
,
downloadFullMarkerImage
)
// put fullMarkerImage into #imageContainer
var
container
=
document
.
querySelector
(
'
#imageContainer
'
)
while
(
container
.
firstChild
)
container
.
removeChild
(
container
.
firstChild
);
container
.
appendChild
(
fullMarkerImage
)
})
updateFullMarkerImage
()
};
reader
.
readAsDataURL
(
file
);
})
...
...
@@ -115,6 +113,41 @@
var
win
=
window
.
open
(
fullMarkerURL
,
'
_blank
'
);
win
.
focus
();
}
function
updateFullMarkerImage
(){
THREEx
.
ArPatternFile
.
buildFullMarker
(
innerImageURL
,
function
onComplete
(
markerUrl
){
fullMarkerURL
=
markerUrl
var
fullMarkerImage
=
document
.
createElement
(
'
img
'
)
fullMarkerImage
.
src
=
fullMarkerURL
fullMarkerImage
.
addEventListener
(
'
click
'
,
downloadFullMarkerImage
)
// put fullMarkerImage into #imageContainer
var
container
=
document
.
querySelector
(
'
#imageContainer
'
)
while
(
container
.
firstChild
)
container
.
removeChild
(
container
.
firstChild
);
container
.
appendChild
(
fullMarkerImage
)
})
}
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
document
.
querySelector
(
'
#buttonDownloadPDF
'
).
addEventListener
(
'
click
'
,
generatePdf
)
function
generatePdf
(){
var
docDefinition
=
{
content
:
[
{
image
:
fullMarkerURL
,
width
:
600
,
alignment
:
'
center
'
,
},
],
}
pdfMake
.
createPdf
(
docDefinition
).
open
();
}
</script>
</body>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录