提交 c3148a14 编写于 作者: J Jerome Etienne

more on marker generator

上级 0e6e39f2
......@@ -121,8 +121,9 @@
type : 'pattern',
// patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.hiro',
patternUrl : THREEx.ArToolkitContext.baseURL + '../data/data/patt.kanji',
patternUrl : 'markerGenerator/patternFiles/generatedKanji.patt',
// patternUrl : 'markerGenerator/patternFiles/generatedHiro.patt',
patternUrl : 'markerGenerator/examples/patternFiles/generatedKanji.patt',
// patternUrl : 'markerGenerator/examples/patternFiles/generatedHiro.patt',
patternUrl : 'markerGenerator/tmp/generated-marker.patt',
})
......
......@@ -2,7 +2,10 @@
- when a file is uploaded, display the fullMarkerImage (thus downloadable + usable immediatly for AR)
- button upload (drag drop latter)
- warn if image isnt square but goes on, convert to square automatically
- or not... they will see it
- do a pdf download
- with specific size of markers on the page
- multiple markers per page
--------------
......
<!doctype html>
<style media="screen">
body {
background-color: #ccc;
}
</style>
<script src="../threex-arpatternfile.js"></script>
<body>
<a target='_blank' href='https://artoolkit.org/documentation/doku.php?id=3_Marker_Training:marker_training'>artoolkit tutorial</a>
<br/>
<input id='buttonDownloadEncoded' type="button" value="Download encoded file">
<br/>
<input id='buttonDownloadImage' type="button" value="Download image">
<br/>
<input id='buttonDownloadPDF' type="button" value="Download PDF" disabled>
<br/>
<input type="file" id="fileinput" />
<br/>
<div id='imageContainer'></div>
<script>
// var imageURL = 'images/inner-kanji.png';
// var imageURL = 'images/inner-hiro.png';
//
// THREEx.ArPatternFile.encodeImageURL(imageURL, function onComplete(patternFileString){
//
// console.log(patternFileString)
//
// THREEx.ArPatternFile.triggerDownload(patternFileString)
// })
var innerImageURL = null
var fullMarkerURL = null
document.querySelector('#buttonDownloadImage').addEventListener('click', downloadFullMarkerImage)
document.querySelector('#buttonDownloadEncoded').addEventListener('click', function(){
if( innerImageURL === null ){
alert('upload a file first')
return
}
console.assert(innerImageURL)
THREEx.ArPatternFile.encodeImageURL(innerImageURL, function onComplete(patternFileString){
THREEx.ArPatternFile.triggerDownload(patternFileString)
})
})
document.querySelector('#fileinput').addEventListener('change', function(){
var file = this.files[0];
......@@ -22,19 +43,32 @@
var reader = new FileReader();
reader.onload = function(event){
var imageURL = event.target.result
// debugger
THREEx.ArPatternFile.encodeImageURL(imageURL, function onComplete(patternFileString){
innerImageURL = event.target.result
THREEx.ArPatternFile.buildFullMarker(innerImageURL, function onComplete(markerUrl){
fullMarkerURL = markerUrl
console.log(patternFileString)
var fullMarkerImage = document.createElement('img')
fullMarkerImage.src = fullMarkerURL
THREEx.ArPatternFile.triggerDownload(patternFileString)
fullMarkerImage.addEventListener('click', downloadFullMarkerImage)
// put fullMarkerImage into #imageContainer
var container = document.querySelector('#imageContainer')
while (container.firstChild) container.removeChild(container.firstChild);
container.appendChild(fullMarkerImage)
})
var image = document.createElement('img')
image.src = imageURL
document.body.appendChild(image)
};
reader.readAsDataURL(file);
})
function downloadFullMarkerImage(){
if( innerImageURL === null ){
alert('upload a file first')
return
}
console.assert(fullMarkerURL)
var win = window.open(fullMarkerURL, '_blank');
win.focus();
}
</script></body>
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 220 92 92 92 222 222 222 222 222 222 222
222 94 222 92 222 220 99 222 151 137 222 222 157 222 222 222
222 92 222 92 222 220 92 92 149 222 222 222 157 0 38 222
222 92 92 92 92 220 99 222 92 222 222 222 157 185 0 222
92 222 222 222 92 220 99 222 222 92 0 222 157 0 0 222
222 222 222 222 222 222 222 222 222 222 222 0 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 220 92 92 92 222 222 222 222 222 222 222
222 94 222 92 222 220 99 222 151 137 222 222 199 222 222 222
222 92 222 92 222 220 92 92 149 222 222 222 199 145 158 222
222 92 92 92 92 220 99 222 92 222 222 222 199 209 145 222
92 222 222 222 92 220 99 222 222 92 145 222 199 145 145 222
222 222 222 222 222 222 222 222 222 222 222 145 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 220 92 92 92 222 222 222 222 222 222 222
222 94 222 92 222 220 99 222 151 137 222 222 222 222 222 222
222 92 222 92 222 220 92 92 149 222 222 222 222 222 222 222
222 92 92 92 92 220 99 222 92 222 222 222 222 222 222 222
92 222 222 222 92 220 99 222 222 92 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 38 0 0 222
222 222 222 222 222 222 222 222 222 222 222 222 0 185 0 222
222 222 222 222 222 222 222 222 222 222 222 157 157 157 157 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 0
222 222 222 222 222 222 222 222 222 222 222 222 222 222 0 222
222 222 222 222 222 222 222 222 222 222 222 137 222 222 92 222
222 222 222 222 222 222 222 222 222 222 92 151 149 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 92 222 222 222
222 222 222 222 222 222 222 222 222 222 92 99 92 99 99 222
222 222 222 222 222 222 222 222 222 222 220 220 220 220 220 222
222 222 222 222 222 222 222 222 222 222 222 222 222 92 92 222
222 222 222 222 222 222 222 222 222 222 222 92 92 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 94 92 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 92 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 158 145 145 222
222 222 222 222 222 222 222 222 222 222 222 222 145 209 145 222
222 222 222 222 222 222 222 222 222 222 222 199 199 199 199 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 145
222 222 222 222 222 222 222 222 222 222 222 222 222 222 145 222
222 222 222 222 222 222 222 222 222 222 222 137 222 222 92 222
222 222 222 222 222 222 222 222 222 222 92 151 149 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 92 222 222 222
222 222 222 222 222 222 222 222 222 222 92 99 92 99 99 222
222 222 222 222 222 222 222 222 222 222 220 220 220 220 220 222
222 222 222 222 222 222 222 222 222 222 222 222 222 92 92 222
222 222 222 222 222 222 222 222 222 222 222 92 92 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 94 92 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 92 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 137 222 222 92 222
222 222 222 222 222 222 222 222 222 222 92 151 149 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 92 222 222 222
222 222 222 222 222 222 222 222 222 222 92 99 92 99 99 222
222 222 222 222 222 222 222 222 222 222 220 220 220 220 220 222
222 222 222 222 222 222 222 222 222 222 222 222 222 92 92 222
222 222 222 222 222 222 222 222 222 222 222 92 92 92 222 222
222 222 222 222 222 222 222 222 222 222 92 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 94 92 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 92 222
222 222 222 222 0 222 222 222 222 222 222 222 222 222 222 222
222 0 0 157 222 0 92 222 222 99 220 92 222 222 222 92
222 0 185 157 222 222 222 92 222 99 220 92 92 92 92 222
222 38 0 157 222 222 222 149 92 92 220 222 92 222 92 222
222 222 222 157 222 222 137 151 222 99 220 222 92 222 94 222
222 222 222 222 222 222 222 92 92 92 220 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 145 222 222 222 222 222 222 222 222 222 222 222
222 145 145 199 222 145 92 222 222 99 220 92 222 222 222 92
222 145 209 199 222 222 222 92 222 99 220 92 92 92 92 222
222 158 145 199 222 222 222 149 92 92 220 222 92 222 92 222
222 222 222 199 222 222 137 151 222 99 220 222 92 222 94 222
222 222 222 222 222 222 222 92 92 92 220 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 92 222 222 99 220 92 222 222 222 92
222 222 222 222 222 222 222 92 222 99 220 92 92 92 92 222
222 222 222 222 222 222 222 149 92 92 220 222 92 222 92 222
222 222 222 222 222 222 137 151 222 99 220 222 92 222 94 222
222 222 222 222 222 222 222 92 92 92 220 222 222 92 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 92 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 92 94 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 92 92 222 222 222 222 222 222 222 222 222 222 222
222 92 92 222 222 222 222 222 222 222 222 222 222 222 222 222
222 220 220 220 220 220 222 222 222 222 222 222 222 222 222 222
222 99 99 92 99 92 222 222 222 222 222 222 222 222 222 222
222 222 222 92 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 149 151 92 222 222 222 222 222 222 222 222 222 222
222 92 222 222 137 222 222 222 222 222 222 222 222 222 222 222
222 0 222 222 222 222 222 222 222 222 222 222 222 222 222 222
0 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 157 157 157 157 222 222 222 222 222 222 222 222 222 222 222
222 0 185 0 222 222 222 222 222 222 222 222 222 222 222 222
222 0 0 38 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 92 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 92 94 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 92 92 222 222 222 222 222 222 222 222 222 222 222
222 92 92 222 222 222 222 222 222 222 222 222 222 222 222 222
222 220 220 220 220 220 222 222 222 222 222 222 222 222 222 222
222 99 99 92 99 92 222 222 222 222 222 222 222 222 222 222
222 222 222 92 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 149 151 92 222 222 222 222 222 222 222 222 222 222
222 92 222 222 137 222 222 222 222 222 222 222 222 222 222 222
222 145 222 222 222 222 222 222 222 222 222 222 222 222 222 222
145 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 199 199 199 199 222 222 222 222 222 222 222 222 222 222 222
222 145 209 145 222 222 222 222 222 222 222 222 222 222 222 222
222 145 145 158 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 92 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 92 92 94 222 222 222 222 222 222 222 222 222 222 222
222 222 92 222 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 92 92 222 222 222 222 222 222 222 222 222 222 222
222 92 92 222 222 222 222 222 222 222 222 222 222 222 222 222
222 220 220 220 220 220 222 222 222 222 222 222 222 222 222 222
222 99 99 92 99 92 222 222 222 222 222 222 222 222 222 222
222 222 222 92 222 92 222 222 222 222 222 222 222 222 222 222
222 222 92 149 151 92 222 222 222 222 222 222 222 222 222 222
222 92 222 222 137 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
......@@ -77,3 +77,51 @@ THREEx.ArPatternFile.triggerDownload = function(patternFileString){
domElement.click();
document.body.removeChild(domElement)
}
THREEx.ArPatternFile.buildFullMarker = function(innerImageURL, onComplete){
var whiteMargin = 0.1
var blackMargin = 0.2
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d')
canvas.width = canvas.height = 512
context.fillStyle = 'white';
context.fillRect(0,0,canvas.width, canvas.height)
// copy image on canvas
context.fillStyle = 'black';
context.fillRect(
whiteMargin * canvas.width,
whiteMargin*canvas.height,
canvas.width * (1-2*whiteMargin),
canvas.height * (1-2*whiteMargin)
);
// clear the area for innerImage (in case of transparent image)
context.fillStyle = 'white';
context.fillRect(
innerMargin * canvas.width,
innerMargin*canvas.height,
canvas.width * (1-2*innerMargin),
canvas.height * (1-2*innerMargin)
);
var innerImage = document.createElement('img')
var innerMargin = whiteMargin + blackMargin
innerImage.addEventListener('load', function(){
// draw innerImage
context.drawImage(innerImage,
innerMargin * canvas.width,
innerMargin*canvas.height,
canvas.width * (1-2*innerMargin),
canvas.height * (1-2*innerMargin)
);
var imageUrl = canvas.toDataURL()
onComplete(imageUrl)
})
innerImage.src = innerImageURL
}
......@@ -155,7 +155,7 @@ THREEx.ArToolkitSource.prototype._initSourceWebcam = function(onReady) {
// TODO super unclear how to get the backward facing camera...
// if( constraints.video.optional !== undefined ) return
if( constraints.video.optional !== undefined ) return
constraints.video.optional = [{sourceId: device.deviceId}]
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册