added events and images back in for complete example#1
added events and images back in for complete example#1
Conversation
9am
left a comment
9am
left a comment
There was a problem hiding this comment.
Thanks for the contribution, let's discuss in the PR : )
| try { | ||
| this.shadowRoot!.host.classList.add('loading'); | ||
| this.dispatchEvent(new CustomEvent('loading', { | ||
| bubbles: true, |
There was a problem hiding this comment.
I'm all good with events, but it's better to declare them in const somewhere, what do you think~
| const source = <HTMLImageElement>this.img.cloneNode(); | ||
| const pixels = source.width * source.height; | ||
| source.crossOrigin = 'anonymous'; // Ensure we can read the pixel data | ||
| const pixels = this.img.width * this.img.height; |
There was a problem hiding this comment.
Is there any reason to use this.img instead of source for the pixels?
| source.width = Math.ceil(source.width * scale); | ||
| source.height = Math.ceil(source.height * scale); | ||
| source.width = Math.ceil(this.img.width * scale); | ||
| source.height = Math.ceil(this.img.height * scale); |
| })); | ||
|
|
||
| // limit max pixel | ||
| const source = <HTMLImageElement>this.img.cloneNode(); |
There was a problem hiding this comment.
Is this the root cause of the 'img not ready' problem? Not sure how will it act, maybe cloneNode on a loaded img will trigger a reloading of the URL again?
Anyway, if that's the case, will it be better to resolve the issue here by adding a waiting promise like you did below? Thanks for finding this bug, though.
| // limit max pixel | ||
| const source = <HTMLImageElement>this.img.cloneNode(); | ||
| const pixels = source.width * source.height; | ||
| source.crossOrigin = 'anonymous'; // Ensure we can read the pixel data |
There was a problem hiding this comment.
source is cloned from img, i guess we already have the crossOrigin assigned in static loadImage : )
There was a problem hiding this comment.
Could you bring back the original avocado picture I removed?
That one helped me a lot during creating the component due to its simplicity, and..... it's kind of where the logo comes from : )
| <div class="dot black"></div> | ||
| </div> | ||
| <img-halftone src="./img/friut.jpeg" shape="circle"></img-halftone> | ||
| <img-halftone src="./img/fruit.jpg" shape="circle"></img-halftone> |
2 participants
No description provided.