The canvas component has a very low limit for height and width. If I put an image inside, it loses a lot of quality (I've already tried — in this case the text works, but the quality is not acceptable).
Show us your updated blocks
Does the image displayed in the image component have the watermark?
Taifun
You forgot to tell us
And obviously you should do a gallery refresh of the file in the target directory, in your case inckuding the upcase block
Taifun
Use the companion app and Do it to debug your blocks, see also tip 4 here App Inventor: How to Learn | Pura Vida Apps
see also Live Development, Testing, and Debugging Tools
Taifun
Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by 
Taifun.
I am not sure if the extension actually commits the changes to file, it only changes the image component view.
You may need another extension Component To Image to actually save the modified image
Another option may be to export the image view to base64, then save this as a file (the watermark would probably need to be on the same layer for this to work:
1 Like
I also tried adding the 'upcase' block as you suggested, but it still doesn't work. The image displayed in the image component has a watermark — I didn’t forget to mention it, it’s in the first message I sent, where there’s a screenshot of the app.
Now I'll try the solution suggested by TIMAI2
To find it out, display the image as test additionally in another image component
Taifun
Thank you TIMAI2!
I tried your suggestion to use component to image to save the image, and I managed to get to this result (I still have some issues, but I'm getting closer to the solution): with the "save original image" command, I’m able to save the original photo, renamed as I want, into a specific folder. With the "save edited image" command, I can save the photo with the overlaid text, also renamed as I want, into the same folder as the other one.
The problem is that the photo with the overlaid text loses a lot of quality (I think it’s because of the conversion through the Image component, or maybe the component to image block). The original photo is about 4.3 MB, while the edited one is only 400 KB.
How can I fix this?
You will lose image quality if you do not set the image component to the actual dimensions of the image to be displayed.Doing this will massively overflow the screen and probably misplace the text overlay.
I left the Image component with height and width set to "Automatic" because sometimes the photos are horizontal, sometimes vertical; if they're taken with the wide-angle lens, the size changes, and if they're taken with the front camera, they have a different size again. Not to mention that, depending on the phone's sensor and settings, the photos can have different dimensions.
For this reason, I didn’t want to set a fixed size for the Image component, and I left it as automatic.
Which is fine, but internally AppInventor will resize the image to fit in the screen along with other components.
I did several tests to see what happens when I increase the size of the image component. I found out that if I set the width to 1775 and the height to 1331, the exported image ends up being approximately the same size as the original photo (4624x3468), (I have no idea why).
This is the comparison between the two saved photos:
Original:
Edited:
As you can clearly see, in the edited photo (which has pixel dimensions roughly equal to the original), the file size in MB is more than twice as large, and the image quality is lower. So in my opinion, it's not about the size of the Image component, but rather App Inventor itself, which compresses the image and causes quality loss when processing it through this component. Is there any solution?
Looks like, if the original image dimensions are important to you, that you need to apply the watermark to the original image, not one loaded into an image component. I am not sure if there is an extension available that does that (it should be possible).
Still may be possible with the canvas, but would need to test.
1 Like
Canvas doesn't like to be as big as an image from camera (found this previously when working with a larger canvas).
Explain why your images need to be full size ?
Adding a watermark to the original image seems quite doable:
If I get time and the inclination I will have a go.
Here is a test app with a small extension (only one method) that creates a new image with watermark using compressionQuality = 100. So the new image should have the best quality and the same dimension as the original one (taken by the Camara component).
watermark.aia (83.4 KB)
Watermark feature now added to the Image Convertor extension. This will take the path of an image on the device and output the modified image as a PNG.
I have noticed that the methods used to modify the file can vastly increase the file size of the image (a large image can take quite a few seconds to complete) If this is the case for you, and the file size is too large, you can use the Image Convertor extension to resize the output image back to what it was...
The original photo is 1.3 MB in size, while the new image is 7.1 MB. With my extension (compressionQuality = 100), the difference is much smaller.
Yes, and it seems to vary depending on device. I am sure we are doing much the same thing in our extensions, not figured out yet what is doing it in mine.
Have added the BitmapFactory options, this may help:
BitmapFactory.Options options = new BitmapFactory.Options();
options.inScaled = false;
Bitmap bitmap = BitmapFactory.decodeFile(etarget,options);
hmmm, did not appear to help a great deal...