I generate a qr code image using jquery.qrcode library. I get the image in the following format.
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>
I want to print this image with some text added to it(since this is a qrcode). I know to print the image when the image is drawn from backend of C#. Is there anyway I can convert this image to memory stream data to send to C# or anyway that I can print from Javascript when the image is drawn?
send your image base64 url using ajax call
on C# side use this function
public Image Base64ToImage(string base64String)
{
// Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
MemoryStream ms = new MemoryStream(imageBytes, 0,
imageBytes.Length);
// Convert byte[] to Image
ms.Write(imageBytes, 0, imageBytes.Length);
Image image = Image.FromStream(ms, true);
return image;
}
You can print directly from JavaScript, you don't need to convert or send it to c#. The c# is in back-end, and I believe you need to print on the front-end (end-user machine)
You can use IFRAME and add the image your text to it.
After that you can print the IFRAME.
http://jsfiddle.net/8gcz0dw7/
A working Example
iframe=document.createElement('iframe')
document.body.appendChild(iframe)
var co=iframe.contentDocument.body;
$(co).append('your text<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"/>')
iframe.focus()
iframe.contentWindow.print()
Related
I use the function readAsArrayBuffer of FileReader to get the content of the selected image.
reader.readAsArrayBuffer(file.target.files[i]);
After that, i want to send the ArrayBuffer to my Java Server
reader.onload = function(fileData)
{
uploadPhoto.fileData = fileData.target.result;
funcupload([{name:'fileData',value:uploadPhoto.fileData}]);
}
The Question is now, how can I convert the [object ArrayBuffer] in Java to an Image File?
I think its very simple, but I can't find a solution
I'm trying to append file to a form and send it via POST request.
The problem is the file generates in js script (it's cropped image in base64)
Next, I convert it from base64 to blob. And there no idea how to link this blob to my form.
I can do it via ajax, but looking for way to send image as file without xhr/ajax and proccess it of PHP side in $_FILES.
Don't even know is it possible
My form has attr 'multipart/form-data'
you can create a hidden canvas and in that canvas you can draw the image with your base64 encoded string. Something like below
<canvas style="height:200px;width:200px;display:none;" id="picture"></canvas>
<input type="hidden" name="clicked_image" id="clicked_image" />
and then the javascript code as
<script type="text/javascript">
var videoPicture = 'your base64 string';
var hiddenPictureField = document.querySelector('input#clicked_image');
var canvasPicture = window.canvas = document.querySelector('canvas#picture');
canvasPicture.width = 480;
canvasPicture.height = 360;
canvasPicture.getContext('2d').
drawImage(videoPicture, 0, 0, canvasPicture.width, canvasPicture.height);
hiddenPictureField.value = canvasPicture.toDataURL("image/png");
</script>
And then you will get the image in the clicked_image field. The base 64 string you can process it accordingly.
I want to inject my site to ios device and I need to use the device's camera.
It returns a base64 image type. When the camera is finished, can I convert that to a file type?
If mobile device return a file path, can I reset it to a input element (with type="file") and then reuse fileReader to read it? How to do it?
If mobile device return a file path, can I set the <img> element's src attribute? will it show?
you can get it from client in base64 format and the convert it to image file in server side using php:
function base64_convert_to_jpeg($base64_string_in, $file_out) {
$fp = fopen($file_out, "wb"); // this open file writable and binary
$data = explode(',', $base64_string_in); //explode base64 string with ',' character
fwrite($fp, base64_decode($data[1])); //decode base64 and write it to file
fclose($fp); //close the file
return $file_out; //return jpeg file
}
if you have problem with it or you have any question about that, replay that for me...
good luck
I have an ajax application where the PHP side sends uncoded raw image data, coming from a camera, to the client javascript side.
I would like to display the image via html and javascript using img or canvas tags.
Image data are 32*32 unsigned char.
I would like to do, whatever it takes to reach my goal (encoding or everythig else), but I want to do it at client side beacause I cannot handle any other operation at the server side.
I tried to encode raw data into jpeg or png data but without success.
I post an example that doesn't work:
var encoder = new JPEGEncoder(9);
var jpgFile = encoder.encode(rawImage, 9);
document.getElementById("image").src = jpgFile;
jpgFile is like
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAFk9Q05DOFlOSE5kXllphd6QhXp6hf/CzaHe//////////////////////////////////////////////////8BXmRkhXWF/5CQ///////////////////////////////////////////////////////////////////////////AABEIAAAAAAMBEQACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP8A/9k=
I got JPEGEncoder googling on internet.
Tried it for you =)
http://jsfiddle.net/bYGum/
All you have to do is make sure your string is base64 encoded and do the exact same thing you have already written:
document.getElementById("image").src = jpgFile;
I have a Unit8Array in a mongodb that represents a png image. I pull the array out and convert it to base64 using javascript (in meteor client side) so that I can display it in the browser. The code is as follows
var blob = new Uint8Array(Tester.findOne().image);
var base64String = btoa(String.fromCharCode.apply(null, blob));
var src = 'data:image/png;base64,' + base64String + '';
console.log(src);
Where Tester.findOne().image is my mongodb collection containing the Uint8Array.
I take the src once it is logged and I paste it into the browser. The generic broken image icon appears (see below). However when I click the broken image in the browser and say save to desktop, it downloads the file and when I open it the png image appears as expected.
After I Download the Image:
When I directly try to assign it to <img src = 'data'>:
Adding data as img source or by using document.findElementbyId("img") then changing img.src: