Hi Using javascript, i am trying to assign the image at the local file system to the ZK Image component. It seems to be that, it is not possible, so other way is to use Native img element to show the image. But i need to store that image in the database via MVVM Any idea on this ?
How to send Base64 encoded data using JavaScript to server-side (ZK)
Or in other way, do you anybody know how to send Base64 encoded data(image) using JavaScript to server-side (ZK)
Base64 encoded data is a String, you can fire event from client side and bring the encoded string to server side, check the reference document
vincentjian ( 2013-08-05 09:22:17 +0800 )editLet me give the details what we are trying to achieve. A small device (scanner) will be attached to the desktop PC.
And user will keep the driving license card in that machine. Then we need to scan both front and back part of the driving license and
store as image. And also, we need to extract the data such as first name, last name, etc.
Scanning device company has provided an example in Javascript + HTML. You can check here. (https://gist.github.com/senthilmuthiah/6109799)
If you see that example, in the ScanCard js method, CSSNLibJ.ScanToFileJ(""); //scan file to buffer & disk. So this method, returns scanned image and then you can see, the following code display the image in the screen using native HTML image as follows
if (cardSide == "front") {
document.getElementById('scanImage').innerHTML = "";
}
else {
document.getElementById('scanBackImage').innerHTML = "
";
}
Now i am just converting the above example code into ZK + Java script. Instead of Native HTML Elements, i am using the ZK elements. After help, now i am able to connect the device using ZK Applet and sucessfully the scanning also. But i got into problems in showing that image in the screen and also no idea how to take that image to server side You can check the code so far i have done. https://gist.github.com/senthilmuthiah/6156004
Please help me to complete this task :)
Can you try to narrow down your question? Or most people like me do not have such an device, cannot really provide a suggestion.
For example, right click on the scanned image and select inspect element to see the real content of it, then the question probably become "how to encode an image to base64 String at client side and transfer it to server" or "how to transfer image link to server and encode it at server side".
Here is my real problem. I have been trying any one of the ZK Team to just see on the remote machine how it works and help further on it. But not any body interest, so trying to explain it again and again in different way.
So still thinking how to explain it better way to finish the module, client is really killing me to finish
Hi benbai and vincentjian.
Ok. Let me change my question in my simple way. Can you please show me an example for the following
Did you understand ?
Hi,
can't you to adapt an upload button? Follow a pure java example:
Tags
People
Badges
Help
// todo: append image and button to any window
public void ImageInput() {
final int width = 200;
final int heigh = 150;
final Image image = new Image();
Button button = new Button("Upload");
button.setMold("trendy");
button.setUpload("true,maxsize=200");
button.addEventListener("onUpload", new EventListener() {
@Override
public void onEvent(Event event) throws Exception {
UploadEvent uploadEvent = (UploadEvent) event;
Media media = uploadEvent.getMedia();
if (media == null) {
MensagemUtil.aviso("Fail");
} else {
if (media instanceof org.zkoss.image.Image) {
org.zkoss.image.Image img = (org.zkoss.image.Image) media;
ByteArrayInputStream is = new ByteArrayInputStream(img.getByteData());
image.setContent(ImagemUtil.resize(ImageIO.read(is), width, heigh));
} else {
MensagemUtil.aviso("Not an image");
}
}
}
});
}
Does the HTML img contains image with a link? If so, whether the server can access this link or it can be accessed at client only?
The image is at the client side only. The scanning device, after scanning the card, it stores the image at the client side only.
Senthilchettyin ( 2013-08-09 19:30:05 +0800 )editIt stores as base64 encoded data or as a file in the local client computer (say for example, c:\temp\frontcard.jpg)
Senthilchettyin ( 2013-08-09 19:39:05 +0800 )editIf HTML5 is an option, you can try to achieve it as below:
Load image into a canvas.
Get download url of canvas, pass it to server, store it and transfer it to an image then assign it to ZK image component.
Regarding load image into a canvas, please refer to loadImage function within the code below:
Regarding step 2, please refer to the sample below:
References:
Articles at my blog:
If HTML5 is not an option, there are several ways you can try: 1, Handle upload action with javascript (and probably a hidden ZK upload button) to upload HTML image to server then process it. 2, Use an Applet to encode it at client side then pass it to server.
benbai ( 2013-08-09 17:57:51 +0800 )edit:). I love ZK and started working with that because it hides all the other head ache like javascript, HTML, etc. But i think, i need to learn other stuff also. All these are new to me. But let me try.
Senthilchettyin ( 2013-08-09 19:32:34 +0800 )editDo you have any example please for option 1 in the non HTML 5 option ?
Senthilchettyin ( 2013-08-09 19:41:07 +0800 )editHi,
Does the applet always can return base 64 encoded string? If yes, you can simply put the string inside a invisible textbox, then click on button to decode the base 64 encoded string.
@Senthil
After further investigation, it seems impossible to do it with pure javascript (refer to File upload with Javascript without user intervention, I also tried applet way but it seems need user to set up a policy file (see embedding policy file in a jar file
For now I'd suggest just make the file path readable (e.g., display it in a textbox) and let user to upload it manually.
And as Vincent mentioned above, I believe the tools for the device you installed should already provide some utils to transfer image file to base64 and you can pass base64 String to server with ease.
Asked: 2013-08-01 04:09:47 +0800
Seen: 76 times
Last updated: Aug 16 '13
what do you mean "image at the local file system", does the image file not exist inside war file?
vincentjian ( 2013-08-05 09:25:44 +0800 )edit