I’m trying to make a view that shows an image with another image on top of it. The purpose is that a user can pick an image, add a ‘sticker’ that can be panned, scaled and rotated a la Snapchat and save it.
To save the result, I’m using takeSnapshotAsync, but I’m having difficulty understanding how to set the
The view that gets snapshotted has a size of 300x300 pixels on the iPhone (7) emulator. The image I choose from the camera roll (waterfall) is 2002x3000 (height x width)
The results I’m getting from different configs of takeSnapshotAsync are not logical to me:
quality: 1, height: undefined, width: undefined, resulting image saved: 600x600 ____ quality: 1, height: 100, width: 100, resulting image saved: 200x200 ____ quality: 1, height: 300, width: 300, resulting image saved: 600x600 ____ quality: 1, height: 500, width: 500, resulting image saved: 1000x1000 ____ quality: 1, height: 1000, width: 1000, resulting image saved: 2000x2000 ____ quality: 1, height: 2002, width: 3000, resulting image saved: 1367 x 2048
So it seems that
- If no width/height is specified, the result will be twice the size of the viewport. Also tested by changing viewport size to 225x225, where the result was 450x450
- If width/height is specified, the result will be twice the size of the given dimensions
- If a too large size is given (as in the last example where I try to pass along the size of the original image), a max of some sorts is reached
My goal is, of course, to save an image with same dimensions as the original but with the sticker ‘burnt in’, but I can’t see how and if this is possible from the above tests?
I’ve made a sketch to play around with here: https://snack.expo.io/ryO6GTAbf
I hope someone can help or clarify what I’m doing wrong