Commit 545e15b0 authored by josh's avatar josh
Browse files

using canvas for image view

parent 66de6691
...@@ -28,15 +28,18 @@ DBViewerTemplate.innerHTML = ` ...@@ -28,15 +28,18 @@ DBViewerTemplate.innerHTML = `
<div id="image-file-list"> <div id="image-file-list">
<ul> <ul>
</div> </div>
-->
<div id="image-view"> <div id="image-view">
<div id="original-image">
<img src="static/GeoEyeLarge-2.jpg">
</div>
<div id="slice-image"> <div id="slice-image">
<img src="static/default.jpg"> <img src="static/default.jpg">
</div> </div>
</div> </div>
-->
<div id="original-image" style="display:none;">
<img id="image" src="static/GeoEyeLarge-2.jpg">
</div>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>
</div> </div>
`; `;
...@@ -48,6 +51,8 @@ class DBViewer extends HTMLElement { ...@@ -48,6 +51,8 @@ class DBViewer extends HTMLElement {
constructor() { constructor() {
super(); super();
this.appendChild( DBViewerTemplate.content.cloneNode( true ) ); this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
} }
copyImageToStatic( newImage ) { copyImageToStatic( newImage ) {
...@@ -60,6 +65,15 @@ class DBViewer extends HTMLElement { ...@@ -60,6 +65,15 @@ class DBViewer extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = document.getElementById('image');
console.log( image )
image.addEventListener('load', e => {
console.log( "test" );
ctx.drawImage( image, 0, 0 );
});
//this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() ); //this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
} }
......
...@@ -6,16 +6,19 @@ ...@@ -6,16 +6,19 @@
db-viewer { db-viewer {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: scroll;
} }
.db-view-container { .db-view-container {
width: 100%;
height: 100%;
/*
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: grid-template-areas:
"image-view"; "image-view";*/
} }
#image-file-list { #image-file-list {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment