Camera to Server in JPG

1

Follow the sample CameraToServer project, can I convert the base64 into JPG file?

2

On the server or in your app?

3

On the server

4

Since it’s running on the server, it’s out of control for AppStudio.

What’s running on the server?

5

Actually I am using Basic code & VoltBuilder to create an Android project to capture the image from camera, then using AJAX to transfer the image to server as a PNG file. I encounter the following issues.

  1. Should I use the Camera control from Multimedia or cordova-plug-camera?
  2. I try the cordova-plug-camera, it can display the photo onto the Image control with “Image.src=ImageURI”, but I put the same code on “pb=PictureBox.getContext(“2d”)
    pb.addImage(ImageURI)”, the PictureBox control won’t show anything.
  3. Image control won’t have the toDataURL(), so I need to use PictureBox.toDataURL() to send the base64 data to the server via AJAX.
  4. Should I need to decodeURIComponent(PictureBox.toDataURL()) before send by AJAX POST with filename and base64 (image data)?
  5. I have the following php file in server, is it correct?
<?php $filename = $_POST['filename']; $image = $_POST['base64']; $image_parts = explode(";base64,", $image); $image_type_aux = explode("image/", $image_parts[0]); $image_type = $image_type_aux[1]; $image_base64 = base64_decode($image_parts[1]); file_put_contents($filename, $image_base64); ?>
  1. Everything look OK, but only an empty file is created with the filename of $filename.

Please advice.

6

Problem solved. I can save the PNG file into the server now.

7

Great! Any tips for the next person reading this?

8

I have the following findings.

  1. For VoltBuilder, only cordova-plugin-camera can be use.
  2. The PictureBox addImage() is correct, but it only display the image in actual size, since the existing PictureBox size is small, so it only show a little part of the image.
    3 & 4. No matter decode or not the toDataURL() is the same.
  3. I need to add str_replace(’ ', ‘+’, $image_base64) in the php script.
  4. PNG file creation correctly, but it only based on the resolution of the PictureBox. I enlarged the PictureBox size in the form and hidden=true, the new PNG file will have bigger size.

It work perfectly now.

9

I have another question of the camera captured image orientation. When I take a photo in vertical, it can show correctly in the PictureBox, but when I take a photo in horizontal, it will stretch the image into the vertical PictureBox. Is there any way I can detect the captured image orientation, then I can change the PictureBox.width and height?

10

Using the Camer1 control on my PC and selecting a .jpg from the local drive, the stretchy condition happens as determined by the initial setting of the height and width of the Picture1 control, as you have noted.

I can determine the proportional height and width of an image only by using the text input control (bs4 Input set to file). Note the imgImage control is set to 160 px wide and height to auto initially.

  imgImage.show()
   Try 
     reader.readAsDataURL(inpImage.files[0])
   Catch err
      alert("Canceled")
   End Try
End Function

Function reader_onload(e)
  Dim lines()
  lines = Split(e.target.result, vbLF)
  b64 = lines(0)
  imgImage.src = b64
  picImage.show()
  imgImage.show()
  TI = SetTimeout(resReader,100)
End Function

Function resReader()
  ClearTimeout(TI)
  'The goal is to get the width and height of the picture from the image object to use for the picture object
  imgImage.show()
  pw = imgImage.Width
  ph = imgImage.Height
  If ph > 160 Then 'proportionately reduce the size
    b = 160/ph
    pw = b*pw
    pw = CInt(pw)
    ph = 160
    resize = imgImage.style
    resize.width = CStr(pw) & "px"
    resize.height = CStr(ph) & "px"
  End If
  ImageR.src = b64
  resize = picImage.style
  resize.width = CStr(pw) & "px"
  resize.height = CStr(ph) & "px"
  imgImage.show()
  picImage.hide()
  Camera1.show()
  inpImage.hide()
  inpImage.value = ""
  Call ClearImage()
  btnImageReset.show()
  lblImageStep.text = "2:"
  lblImageDel.hide()
End Function
Function ClearImage()
  Dim pb = picImage.getContext("2d")
  pb.clearRect(0, 0, picImage.width, picImage.height);
  localStorage.removeItem("tempb64")
  'imgImage.style.width = "160px"
  'imgImage.style.height = "auto"
End Function
Function lblImageH_onclick()
  Dim context = picImage.getContext("2d");
  b64 = picImage.toDataURL("image/jpeg")
  picImage.show()
  alert("len3: " & Len(b64))
End Function

I can then load the same image into Picturebox1 using the Camera1 control and it is proportionally correct with a maximum width of 160 px and the height set as determined by ph in the code. The code in lblImageH_onclick shows the size if the base64 image. It is quite small and is a function of the preset width of the imgImage object. 160px wide is just used as an example here and the larger the width the larger the generated base64 code.

Problem is, this is a two step operation since programmatically calling Camera1_onclick will not work, I assume for security reasons. However, this two step procedure is not very easy or pleasant for the end user.

John

11

Hi Michael, I know this is 3 years old but if you could give an example of your ajax code in NSB and your php if would be very helpful. I think there is a typo in your str_replace statment in line 3 of your explanation on how you got this to work. Thanks for your help in advance.

12

Sorry for the late reply. I used the following php code to save the PNG file from the base64 image.

$filename = $_POST['filename'].".png";
$image = $_POST['image'];

$image_parts = explode(";base64,", $image);
$img = str_replace(' ', '+', $image_parts[1]);
$image_base64 = base64_decode($img);
file_put_contents($filename, $image_base64);

I just copy some of the sample in the web for the str_replace(). Anyway it work.