Resizing results in overlapping images.

MickL / ts-image-processor

Resize, rotate, mirror and sharpen images in the browser (for TypeScript or Angular projects)

MIT License

15 stars 4 forks source link

Resizing results in overlapping images. #12

Open SpiGAndromeda opened 4 years ago

SpiGAndromeda commented 4 years ago

I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository [ ] question about how to use this project
Summary When Resizing images the resize function in resize.js draws in a loop to the same canvas. This can result in multiple overlapping images (with different size) on the same canvas. The cropping function at the end doesn't remove them.
Other information I will do a forx and see how to fix it nicely. My first working approach (local) was to uzitlize the helperCamvas of the canvasService. I think a new function in the canvasService will do this nicely.

best regards, spigandromeda

P.S. this is a really nice package. Good work!

SpiGAndromeda commented 4 years ago

Fork with fix at SpiGAndromeda/ts-image-processor .

MickL commented 4 years ago

If you already fixed it, could you make a PR? THANK YOU!! :)

SpiGAndromeda commented 4 years ago

@MickL Done. Very fast response. Nice!

MickL commented 4 years ago

I am not exactly sure how to reproduce the overlapping images. Could you give me instructions so I can understand the problem?

SpiGAndromeda commented 4 years ago

Of cause:

I am using your library together with html2canvas and image skewing (btw. something that could be implemented in here, too ;) ... or which I could do) to create an image with 3d transformed text. The skewing, unfortunatly produces ugly artifacts. Thats why I create a bigger text canvas (10x) and reduce it's size with your library. Supersampling.

Images with and without fix are attached. Same "supersampling-factor" used. without-fix with-fix

MickL commented 4 years ago

Can you reproduce it on the demo page?

Please note there seems to be a bug I just found that it only accepts jpg

SpiGAndromeda commented 4 years ago

Just JPEGs? Ok. I used a JPEG of the pure text but the result was ok in demo. @MickL you want to fix the demo first?

Also note that the demo uses default options in the source pipe, which means that data URLs are extracted from canvas as JPEG.