Skip to content

A
AR.js

cqiang1993 / AR.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
A
AR.js

体验新版 GitCode，发现更多精彩内容 >>

提交 e3ad502a 编写于 作者: J Jerome Etienne
浏览文件
操作

added PDF generation

上级 e855014f
隐藏空白更改
内联 并排
Showing with 70 addition and 37 deletion
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.
先完成此消息的编辑！
想要评论请 注册 或