Load image in webviewer from imagepicker selection

MIT App Inventor Help
1

I'm trying to insert an image taken with image picker by passing it to the html file via a webvievstring, but it doesn't work.

blocks
blocks759×423 31.2 KB

as you can see from the blocks when I initialize the screen I make a simple call to the webviewer with a string of an image found in assets. Everything works fine

but when I load the image with imagepicker and pass it to webviever1 it doesn't work.

in webviewer2 instead I directly pass the imagepicker path and everything works fine.

This is my html simply code:

img..txt (257 Bytes)

2

What happens if you try like this ?

image
image747×267 21.7 KB

3

this is ok,.,but my iussue is with imagepicker selection.
My problem comes out when I send the imagepicker selection to the html file as a webstring

1 Like
4

WebViewer doesn't have FileAccess property enabled, I guess.

5

Convert the picked image to a base64 data uri, then pass this to the webviewstring

6

So I can only load the image using your Custom Webview extension or by writing one from scratch

7

Yes, this is correct, but I need direct access without using extensions

8

Copy your html file from the assets to the imagePicker folder and open it from there.

If images are in the same location as the html file then the html file can access them.

9

which is usually imagePicker folder's path

10

Is that a question ?

When using companion the imagePicker folder, on Android 13, is here:
/storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/Pictures/_app_inventor_image_picker

11

ok,thanks,i'll try your solution

12

This is working for me in companion on Android 13

image
image937×538 61.7 KB 

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
	<title>WVImage</title>
</head>
<body>
	<p id = "p1"></p>
	<img id = "img1">
	<script>
	if (window.AppInventor) {
		document.getElementById("img1").src=window.AppInventor.getWebViewString();
		document.getElementById("p1").innerHTML = "image displayed";
	} else {
		document.getElementById("p1").innerHTML = "no image to show";
	}	
	</script>
</body>
</html>
1 Like
13

blocks (4)
blocks (4)810×418 33.5 KB

Error file not found

14

You duplicate most of this:

image

see my blocks to understand how much of the file path is already present, and what you need to provide

Also, your approach to copy the html file in the afterPicking event may be better, because the imagepicker will always delete the oldest file in that directory (once there are 10 files), but you may want to use the ifExists block to reduce unnecessary activity.

15

blocks (5)
blocks (5)861×530 39.3 KB

Great @TIMAI2

16

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.