Angular support
omkarg18 opened this issue · comments
Hi Can you share the angular sample app.For tiff usage.I trying to render tif image based url received from api eg: somehost\temp\sample1.tif .
thanks
I am using LitElement, not Angular, but perhaps what I'm doing may be of
help.
The image servlet I call may return TIFF on non-TIFF images, so my
image-viewer web component tests for that. You'll see I'm using
LitElement's updated() method to watch for changes in the URL. This should
be similar to using the custom element's connectedCallback():
// Must deal with three (3) possibilities:
// TIFF, non-TIFF, or bad image
async updated(changedProperties) {
if (changedProperties.has('imgurl')) {
if (this.imgurl === undefined || this.imgurl === 'undefined') {
return;
}
const response = await fetch(this.imgurl, {
method: 'GET',
credentials: this._credentials,
});
if (response.ok) {
// Display image.
const imagebuf = await response.arrayBuffer();
const magic = new Uint8Array(imagebuf.slice(0, 8));
const imgType = this._getImageType(magic);
if (imgType === 'tiff') {
this._loadTiffImage(imagebuf);
} else if (imgType.length > 0) {
const blob = new Blob([imagebuf], { type: `image/${imgType}` });
image.src = window.URL.createObjectURL(blob);
// clear blob to prevent memory leak
setTimeout(() => window.URL.revokeObjectURL(image.src), 30 * 1000);
} else {
image.src = imageBroken;
image.style.width = '144px';
image.style.height = '144px';
}
}
}
}
// Load image data obtained from file
_loadTiffImage(imagebuf) {
const pages = UTIF.decode(imagebuf);
// console.log(`page count: ${pages.length}`);
UTIF.decodeImage(imagebuf, pages[0]);
const rgba = UTIF.toRGBA8(pages[0]); // Uint8Array with RGBA pixels
// console.log(pages[0].width, pages[0].height, pages[0]);
if (rgba) {
const canvas = document.createElement('canvas');
canvas.width = pages[0].width;
canvas.height = pages[0].height;
// eslint-disable-next-line prefer-destructuring
this._dpi = pages[0].t282 ? pages[0].t282[0] : 72;
const ctx = canvas.getContext('2d');
this._imageData = ctx.createImageData(pages[0].width, pages[0].height);
for (let i = 0; i < rgba.length; i++) {
this._imageData.data[i] = rgba[i];
}
ctx.putImageData(this._imageData, 0, 0);
// Convert canvas to img and add img to DOM.
const image = this.shadowRoot.getElementById('image');
image.src = canvas.toDataURL('image/png');
}
}
I've some general JS samples at https://github.com/johnthad/utif-demo
…On Wed, Aug 26, 2020 at 3:03 AM omkarg18 ***@***.***> wrote:
Hi Can you share the angular sample app.For tiff usage.I trying to render
tif image based url received from api eg: somehost\temp\sample1.tif .
thanks
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#87>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABHP5AUQ4VTQ6MGHFSZ5RUDSCSXVJANCNFSM4QLPHNFQ>
.
--
"Hell hath no limits, nor is circumscrib'd In one self-place; but where we
are is hell, And where hell is, there must we ever be" --Christopher
Marlowe, *Doctor Faustus* (v. 111-13)