Displaying image string data in picture box. - visual-web-gui

I’ve to display a image in a picture box in VisualWebGui. I’ve image in string format.
string ImageString_P;
FileStream fs_P = new FileStream(LocalDirectory + "Page_2.tif", FileMode.Open, FileAccess.Read);
byte[] picbyte_P = new byte[fs_P.Length];
fs_P.Read(picbyte_P, 0, Convert.ToInt32(fs_P.Length));
ImageString_P = Convert.ToBase64String(picbyte_P);
Now, how can I display this image(ImageString_P) in the picture box. Should I create the image of this string data or can I directly display this data in the PictureBox?
If I’ll create the image in a path(suppose “c:\xyz.jpg”) . How it (xyz.jpg) will be displayed in the picturebox.

Visual WebGui is a web application and as such it basically needs to let the browser specifically request any graphics data that should be rendered, which is fundamentally different from that of desktop applications, where you can simply assign the graphics data itself to the image property of a PictureBox.
If you study how a webpage with a PictureBox is rendered to the browser in Visual WebGui, you will see that the PictureBox is rendered as an img tag with the source being set to an Url, which is responsible for serving the image to the browser. When the browser sees that Url on the img tag, it issues another request to the server for the contents of that Url. This "secondary" request is called a gateway request in Visual WebGui.
To serve the graphics to the browser, you need some kind of Gateway in your Visual WebGui application. There are a few types of predefined gateways in Visual WebGui, like for Images (ImageResourceHandle) and icons (IconResourceHandle), but in this case you have a dynamically generated image, so you will need to define your own gateway to serve the graphics contents.... or you can write the image data to, say, Resources\Images folder of your application and then use an ImageResourceHandle to reference it.
Defining your own gateways in Visual WebGui is very simple, and you can see quite a few examples here.
Hope this helps,
Palli

You can do like this:
string ImageString_P;
FileStream fs_P = new FileStream(LocalDirectory + "Page_2.tif", FileMode.Open, FileAccess.Read);
byte[] picbyte_P = new byte[fs_P.Length];
this.picMyPicture.Image = new DynamicStreamResourceHandle(contentBitmap, "image/jpeg");
and it should render fine.

Related

store images in offline storage

I'm creating a speed dial extension for myself (I know there's a lot of speed dial extension, but most of them will display ads, and my antivirus threat them as PuP), I wanted to save website's logo image, let user either place one picture by themselves, or give the url of the picture.
I am stuck with how to save images in chrome's offline storage (https://developer.chrome.com/apps/offline_storage#table), there's no example for saving other file types.
How do I save picture on google chrome's offline storage?
Take a look at chrome.storage API:
5MB data limit or unlimited if the extension has the unlimitedStorage permission
content scripts can directly access user data without the need for a background page.
It's asynchronous and therefore faster than the blocking and serial localStorage API.
User data can be stored as objects (the localStorage API stores data in strings). Only simple JSON-serializable objects are supported, though.
localStorage serializes everything so you'll have to convert the image to a dataurl first:
var xhr = new XMLHttpRequest();
xhr.open('GET', favicon_url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(r) {
if (xhr.status != 200) {
return;
}
localStorage.icon = 'data:image/png;base64,' +
btoa(String.fromCharCode.apply(null, new Uint8Array(xhr.response)));
}
xhr.send();
This is a simplified example which assumes png image type.
chrome.fileSystem API might be a better choice. (not suitable for an extension as it's only for apps)
HTML5 FileSystem API: currently could be the best choice but the API is no longer maintained by W3C so it's unclear whether it stays in the future.
I would convert the image to a data URL. At that point it's just a string so it's easy to save. For examples of data URL images see: https://en.wikipedia.org/wiki/Data_URI_scheme#Examples
I usually convert images to data URLs on the command line with cat whatever.png | base64 but there are a number of websites that will do it for you, if you prefer.
Hope that helps.
To create images yourself (Remember to change the mime type to whatever you need):
cat /apple/Downloads/80.png | printf "%s%s%s" '<img src="data:image/png;base64,' "$(base64 -w0)" '" alt="Red dot" />'
Examples of sites that will create data URLs for you:
http://www.base64-image.de/step-1.php
http://dataurl.net/#dataurlmaker
I've made a fiddle to show how to use the file API to get an image as a data URL: https://jsfiddle.net/quvvtkwr/

Display image in a packagedapp/extension after selecting from Google Drive

My packaged app gets images from google drive and then display them on the side. But I can't get the images to be displayed. I am trying to get the url of the image so that I can put that url in an image source. The image url that I am getting is actually an html page rather than jpeg, png etc. I have looked at the reference guide for google picker but nothing seems to work.
I am using this
function pickerCallback(data) {
if (data.action == google.picker.Action.PICKED) {
var fileId = data.docs[0].id;
fileName = data.docs[0].name;
imgURL = data.docs[0].url;
}
I want to use imgURL as the source for image selection but imgURL is not something like "https//:www.example.com/image.jpg. It is rather an html page I want something that ends with file type only then it will be able to display the image. Please let me know how can I get the image to be displayed in html page of my packaged app after selecting it from google drive.
You should fetch the metadata of the image, then use the webContentLink of the image, then the user can view it in a logged in browser. See the documentation on downloads for more information.

SharePoint 2010 - Picture Library SlideShow Web Part

I am using the Picture Library SlideShow Web Part and I want to show the actual image not the preview image.
I found a solution to use JQUERY to expand the width of the preview image to the width I want on the page, but this of course ruins the quality of the image.
The actual image the was uploaded will be in a path: /Home%20Page%20Banners/Banner2.jpg
SharePoint creates a preview images and placed is in another path and renames the file, for example: /Home%20Page%20Banners/_w/Banner2_jpg.jpg
My question is how can I get the preview image to show the acutal full image that was uploaded and not the scaled down image?
Picture Library SlideShow web part class is marked a sealed, so there is no way to extend it.
But it could be customized on the client side, to be more precise functions from Slideshow library (imglib.js) could be overridden.
How to display full-sized(original) images in Picture Library Slideshow web part
The solution described below allows to display original images in Slideshow web part. In order accomplish it the function for initializing picture in slideshow should be overridden (see the code below).
Step 1. Save below JavaScript code to the file, for example in SlideshowObjectInitializer.txt and upload it to SiteAssets Library
<script type="text/javascript">
function SlideshowObjectInitializer() {
ShowPic = (function(ShowPicOrig) {
return function() {
var ssObj = arguments[0]; //SlideShow object
var curPicIdx=ssObj.index; //current picture index
ShowPicOrig.apply(this, arguments); //call original ShowPic
//apply some changes to display original picture in SlideShow control
ssObj.image.src = ssObj.linkArray[curPicIdx]; //display original image instead of web image
//change picture & container size to auto instead of fixed (by default web image size is used)
ssObj.image.setAttribute('height','100%');
ssObj.image.setAttribute('width','100%');
var cell = ssObj.cell;
cell.style.width = 'auto';
cell.style.height = 'auto';
cell.style.display = '';
var pcell = ssObj.cell.parentNode;
pcell.style.width = 'auto';
pcell.style.height = 'auto';
};
})(ShowPic);
}
ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');
</script>
Step 2. Add Content Editor web part (CEWP) on page where Slideshow web part is located and in the Content Editor tool pane, under Content Link, type /SiteAssets/SlideshowObjectInitializer.txt.
For more details about customizing Slideshow web part please follow this blogpost

Can I Capture phone screenshot using j2me app?

I am trying to develop a wireless phone projector, wherein I will be showing phone screen on projector using a projector connected PC.
I am bit confused on how to capture screenshot of any running application in j2me.
Can you help?
Just want to capture screenshot in j2me
I'm not really sure of what you wanted to do but if you are thinking of a way for your app to get a screenshot of its screen then what I can say is that you can and cannot do it. Why you cannot do it? Say your using a canvas in creating your screen. I think there isn't a way of converting the Canvas to an Image. The Canvas is limited to just drawing itself on the phone screen. But, like what I have said earlier, you can also create a screenshot of your app screen. What you need to have is an Image object over your Canvas. Why Image? It is because the Image object can be converted to an image file. And the image file will be your screenshot. But, of course, there should be something that dynamically creates the image source for the image object on the canvas.
Image myScreen = Image.createImage(createScreen());
A method that creates the screen:
InputStream createScreen(){
//dynamically creates the source of the screen
}
You can have a screenshot using myScreen. The drawback here is that rendering is quite slow. This is possible but I think this is kind of difficult to implement.
With this snippet code you can take a "screenshot" of the Canvases in your app:
public Image getScreenShot() {
Image screenshot = Image.createImage(getWidth(), getHeight());
Graphics g = screenshot.getGraphics();
paint(g);
return Image.createImage(screenshot);
}
Add getScreenShot() to any canvas that you want "screenshot" of it.Then you can get it's RGB and convert to byte[] and pass it on the network.
References:
developer.nokia

Web image display in iPhone app

I am new to developing on the iPhone so am sorry if this is an easy question, but it has had me stumped for a little while.
Basically the app displays data retrieved from an XML feed. In that feed is an element that contains the path to an image. eg http://www.myserver.com/myimage.jpeg.
I want to be able to display that image in the list view of my iPhone app.
Most importantly, I don't want to stop the list drawing for each image, the rest of the data should be displayed immediately and then each image downloads and displays as quickly as data speed etc make it available.
What is the best way of downloading that image and displaying it?
Ideally can someone point to some working example code.
Thanks
Stephen
Displaying the image: you could create a UIWebView and just point it to the path - and then it's fully zoomable too.
Displaying in the list view:
//Somehow download your image...
cell.image = Your Image

Resources