Resizing results in overlapping images.

[SpiGAndromeda]

• 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]

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

[MickL]

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

[SpiGAndromeda]

@MickL Done. Very fast response. Nice!

[MickL]

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

[SpiGAndromeda]

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.

[MickL]

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]

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.