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

using canvas for image view

parent 66de6691
......@@ -28,15 +28,18 @@ DBViewerTemplate.innerHTML = `
<div id="image-file-list">
<ul>
</div>
-->
<div id="image-view">
<div id="original-image">
<img src="static/GeoEyeLarge-2.jpg">
</div>
<div id="slice-image">
<img src="static/default.jpg">
</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>
`;
......@@ -48,6 +51,8 @@ class DBViewer extends HTMLElement {
constructor() {
super();
this.appendChild( DBViewerTemplate.content.cloneNode( true ) );
}
copyImageToStatic( newImage ) {
......@@ -60,6 +65,15 @@ class DBViewer extends HTMLElement {
}
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() );
}
......
......@@ -6,16 +6,19 @@
db-viewer {
width: 100%;
height: 100%;
overflow: scroll;
}
.db-view-container {
width: 100%;
height: 100%;
/*
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"image-view";
"image-view";*/
}
#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