locked
save image to blob after converting html page to image RRS feed

  • Question

  • hello, 

    i am successfully created the html page and save on blob storage,

    now i used the webbrowser to convert html page into an image and

    save on to that blob storage location,

    but i got following path error when i called image.save function.

    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
            {
                WebBrowser webBrowser = (WebBrowser)sender;
                webBrowser.ClientSize = new Size(this.width, this.height);
                webBrowser.ScrollBarsEnabled = false;
                bmp = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
                webBrowser.BringToFront();
                webBrowser.DrawToBitmap(bmp, webBrowser.Bounds);
                Image img = bmp.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero);
    
    
    
    
                string fileName = url.Replace(".html", "").Substring(url.LastIndexOf("/")).Replace("/", "") + ".jpg"; 
    
                fileName = System.Web.HttpUtility.UrlEncode(fileName);
    
                if (absolutePath != null && !File.Exists(absolutePath + fileName))
                {
    
       //absolutePath = "https://xyz.blob.core.windows.net/2-ms";
        string p = Path.Combine(absolutePath, fileName);
    
                        img.Save(p); //here i got error like this:The given path's format is not supported.
    
                     
    
                }
                bmp = (Bitmap)img;
                webBrowser.Dispose();
                if (mre != null)
                    mre.Set();
            }
    


    Brijesh Vaidya India

    Monday, August 19, 2013 1:56 PM

Answers

  • Brijesh,

    two issues i can see, one you encountered and other you will soon encounter once you deploy it on a webrole

    1) the way you are saving file is good for a regular iis hosting, for Azure notion of file paths have to change.. you have few options to choose from each will need a change to your code, some will need more maintainence too.. i will list them out here for you

    • Choose to store on blob storage, tons of help available online and easy to do, less maintenance, cheaper than most other storage options, do require small code change in your example above, little setup
    • choose to store images in sql azure database, little more costly, little more code change, some setup
    • Create a VM, expose a drive and store images there, little code change, lot more setup and hard to maintain (at least for me)

    2) Now problem 2 that you will encounter as soon as you deploy on Azure webrole or website (website is questionable as I have not heard from MS on this formally) is that webbrowsercontrol is not supported in webrole due to security reasons,

    alternative is to consider hosting webpage to image creation service outside azure and consume it from your code in azure or you can use any 3rd party service available, tons of free ones available..

    hope this helps

    ------------------------------------------

    Please mark as answered if it helped


    Please mark as answered if it helped Vishal Narayan Saxena http://twitter.com/vishalishere http://www.ogleogle.com/vishal/


    Monday, August 19, 2013 11:39 PM
  • Hi,

    From your description, I think if you want to save the different type file on blob storage. I suggest you can change file name and extension when you upload the file.

    For example, if you want to upload html file,

    // Retrieve reference to a blob named "myblob.html".
    String filename=”myblob.html”;
    //your logic code
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(filename);
    
    // Create or overwrite the "myblob" blob with contents from a local file.
    using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
    {
        blockBlob.UploadFromStream(fileStream);
    }
    

    If you want to get more detail about blob, please refer to this article: http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage/ .

     And if you want to save the file path after upload file, please try this method:

    blockBlob.Uri.ToString(),
    
    Thanks.

    Will
    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, August 22, 2013 10:10 AM
  • Hi,
    >> absolutePath = "https://abc.blob.core.windows.net/ds";
    From your supplied URl, I think you may misunderstand the blob usage.
    When we upload the file on blob, we can get the url from “blob.Uri.Tostring()”.The file uploaded may not be setted the path. We can set the blob message in the web role or work role.
    >>the given path's format not supported.
    About error,I think may be due to the wrong URL like this:

    img.Save(p, ImageFormat.Png);
    using (var fileStream = System.IO.File.OpenRead(img.ToString()))

    So I modify your code,please make sure your "WebBrowser" function is right and try it.

    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
            {
    
                WebBrowser webBrowser = (WebBrowser)sender;
                webBrowser.ClientSize = new Size(this.width, this.height);
                webBrowser.ScrollBarsEnabled = false;
                bmp = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
                webBrowser.BringToFront();
                webBrowser.DrawToBitmap(bmp, webBrowser.Bounds);
                Image img = bmp.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero);
    
    
                string fileName = url.Replace(".html", "").Substring(url.LastIndexOf("/")).Replace("/", "") + ".jpg";
    
                fileName = System.Web.HttpUtility.UrlEncode(fileName);
                if (absolutePath != null && !File.Exists(absolutePath + fileName))
                {
                         
                    absolutePath = "https://abc.blob.core.windows.net/ds";
    
                    string p = Path.Combine(absolutePath, fileName);
    
                    // Retrieve storage account from connection string.
                    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                        CloudConfigurationManager.GetSetting("BlobConnectionString"));
    
                    // Create the blob client.
                    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    
                    // Retrieve a reference to a container. 
                    CloudBlobContainer container = blobClient.GetContainerReference("ds");
    
                    // Create the container if it doesn't already exist.
                    container.CreateIfNotExist();
    
                    container.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
    
                    // Retrieve reference to a blob named 
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);
    
                    //img.Save(p, ImageFormat.Png);
    
                    // Create or overwrite the "myblob" blob with contents from a local file.
                    //using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
    
                    using (var fileStream = ToStream(img,ImageFormat.Png))
                    {
                        blockBlob.UploadFromStream(fileStream);
                    }
                    //get the img URL on blob
                    string blobimgURL = blockBlob.Uri.ToString();
    
                }
                bmp = (Bitmap)img;
                webBrowser.Dispose();
                if (mre != null)
                    mre.Set();
            }
            //convert image to Stream
            public Stream ToStream(Image image, ImageFormat formaw)
            {
                var stream = new System.IO.MemoryStream();
                image.Save(stream, formaw);
                stream.Position = 0;
                return stream;
            }

    And this article will help you (http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage/ ).

    Thanks

     

    Will
    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, August 27, 2013 6:13 AM

All replies

  • Brijesh,

    two issues i can see, one you encountered and other you will soon encounter once you deploy it on a webrole

    1) the way you are saving file is good for a regular iis hosting, for Azure notion of file paths have to change.. you have few options to choose from each will need a change to your code, some will need more maintainence too.. i will list them out here for you

    • Choose to store on blob storage, tons of help available online and easy to do, less maintenance, cheaper than most other storage options, do require small code change in your example above, little setup
    • choose to store images in sql azure database, little more costly, little more code change, some setup
    • Create a VM, expose a drive and store images there, little code change, lot more setup and hard to maintain (at least for me)

    2) Now problem 2 that you will encounter as soon as you deploy on Azure webrole or website (website is questionable as I have not heard from MS on this formally) is that webbrowsercontrol is not supported in webrole due to security reasons,

    alternative is to consider hosting webpage to image creation service outside azure and consume it from your code in azure or you can use any 3rd party service available, tons of free ones available..

    hope this helps

    ------------------------------------------

    Please mark as answered if it helped


    Please mark as answered if it helped Vishal Narayan Saxena http://twitter.com/vishalishere http://www.ogleogle.com/vishal/


    Monday, August 19, 2013 11:39 PM
  • hello Vishal, Thx for reply,

    i am able to upload the image on blob storage, with help of blob connection, container,

    and also i m able to upload html file there,

    and also i am able to convert the html page to the image file with the help of webbrowser,

    but when it comes to save this image file on the blob storage location,

    for example "https://xyz.blob.core.windows.net/2-ms/msg.jpg" is the path where i need to store the image,

    here i got the error.

    regarding webrole, i assigned the mvc web application to the webrole, and it is deployed and working properly.

    pls help me to save the image on blob.. 


    Brijesh Vaidya India

    Wednesday, August 21, 2013 1:18 PM
  • Hi,

    From your description, I think if you want to save the different type file on blob storage. I suggest you can change file name and extension when you upload the file.

    For example, if you want to upload html file,

    // Retrieve reference to a blob named "myblob.html".
    String filename=”myblob.html”;
    //your logic code
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(filename);
    
    // Create or overwrite the "myblob" blob with contents from a local file.
    using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
    {
        blockBlob.UploadFromStream(fileStream);
    }
    

    If you want to get more detail about blob, please refer to this article: http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage/ .

     And if you want to save the file path after upload file, please try this method:

    blockBlob.Uri.ToString(),
    
    Thanks.

    Will
    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Thursday, August 22, 2013 10:10 AM
  • Hi Brijesh,

    code example from Will Shao will do the trick...

    -----------------------

    Please mark as answered if it helped


    Please mark as answered if it helped Vishal Narayan Saxena http://twitter.com/vishalishere http://www.ogleogle.com/vishal/

    Friday, August 23, 2013 7:09 AM
  • Hello Will, 

    Thank you for your reply,

    my actual issue is that i am not able to open(read) / write file onto blob storage.

    Steps i am following is below:

    1- i upload one image file on blob (success)

    2. give image reference into html file on blob and upload html file.( success)

    3. now read this html file and open and capture the screenshot and convert this html page to image and then store this image onto the blob (fail) //error: the given path's format not supported.

    below is my code for your reference:

     private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
            {
                 
                WebBrowser webBrowser = (WebBrowser)sender;
                webBrowser.ClientSize = new Size(this.width, this.height);
                webBrowser.ScrollBarsEnabled = false;
                bmp = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
                webBrowser.BringToFront();
                webBrowser.DrawToBitmap(bmp, webBrowser.Bounds);
                Image img = bmp.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero);
    
    
                string fileName = url.Replace(".html", "").Substring(url.LastIndexOf("/")).Replace("/", "") + ".jpg"; 
    
                fileName = System.Web.HttpUtility.UrlEncode(fileName);
                if (absolutePath != null && !File.Exists(absolutePath + fileName))
                {
    
                    absolutePath = "https://abc.blob.core.windows.net/ds";
    
                    string p = Path.Combine(absolutePath, fileName);
    
                    // Retrieve storage account from connection string.
                    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                        CloudConfigurationManager.GetSetting("BlobConnectionString"));
    
                    // Create the blob client.
                    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    
                    // Retrieve a reference to a container. 
                    CloudBlobContainer container = blobClient.GetContainerReference(absolutePath);
    
                    // Create the container if it doesn't already exist.
                    container.CreateIfNotExist();
    
                    container.SetPermissions(new BlobContainerPermissions{PublicAccess = BlobContainerPublicAccessType.Blob});
    
                    // Retrieve reference to a blob named 
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(p);
    
                    img.Save(p, ImageFormat.Png);
    
                    // Create or overwrite the "myblob" blob with contents from a local file.
                    //using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
                    using (var fileStream = System.IO.File.OpenRead(img.ToString()))
                    {
                        blockBlob.UploadFromStream(fileStream);
                    }
    
                }
                bmp = (Bitmap)img;
                webBrowser.Dispose();
                if (mre != null)
                    mre.Set();
            }
    public Bitmap GetScreenShot()
            {
                string fileName = url.Replace("https://", "") + ".jpg";
                fileName = System.Web.HttpUtility.UrlEncode(fileName); // https://abc.blob.core.windows.net/ds/ags.html
    
                if (absolutePath != null && File.Exists(absolutePath + fileName)) // this condition false
                {
                    bmp = (Bitmap)System.Drawing.Image.FromFile(absolutePath + fileName);
                }
                else
                {
                    Thread t = new Thread(new ThreadStart(_GetScreenShot));
                    t.SetApartmentState(ApartmentState.STA);
                    t.Start();
                    mre.WaitOne();
                    t.Abort();
                }
                return bmp;
            }




    Brijesh Vaidya India


    Monday, August 26, 2013 7:44 AM
  • Hi,
    >> absolutePath = "https://abc.blob.core.windows.net/ds";
    From your supplied URl, I think you may misunderstand the blob usage.
    When we upload the file on blob, we can get the url from “blob.Uri.Tostring()”.The file uploaded may not be setted the path. We can set the blob message in the web role or work role.
    >>the given path's format not supported.
    About error,I think may be due to the wrong URL like this:

    img.Save(p, ImageFormat.Png);
    using (var fileStream = System.IO.File.OpenRead(img.ToString()))

    So I modify your code,please make sure your "WebBrowser" function is right and try it.

    private void WebBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
            {
    
                WebBrowser webBrowser = (WebBrowser)sender;
                webBrowser.ClientSize = new Size(this.width, this.height);
                webBrowser.ScrollBarsEnabled = false;
                bmp = new Bitmap(webBrowser.Bounds.Width, webBrowser.Bounds.Height);
                webBrowser.BringToFront();
                webBrowser.DrawToBitmap(bmp, webBrowser.Bounds);
                Image img = bmp.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero);
    
    
                string fileName = url.Replace(".html", "").Substring(url.LastIndexOf("/")).Replace("/", "") + ".jpg";
    
                fileName = System.Web.HttpUtility.UrlEncode(fileName);
                if (absolutePath != null && !File.Exists(absolutePath + fileName))
                {
                         
                    absolutePath = "https://abc.blob.core.windows.net/ds";
    
                    string p = Path.Combine(absolutePath, fileName);
    
                    // Retrieve storage account from connection string.
                    CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
                        CloudConfigurationManager.GetSetting("BlobConnectionString"));
    
                    // Create the blob client.
                    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
    
                    // Retrieve a reference to a container. 
                    CloudBlobContainer container = blobClient.GetContainerReference("ds");
    
                    // Create the container if it doesn't already exist.
                    container.CreateIfNotExist();
    
                    container.SetPermissions(new BlobContainerPermissions { PublicAccess = BlobContainerPublicAccessType.Blob });
    
                    // Retrieve reference to a blob named 
                    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);
    
                    //img.Save(p, ImageFormat.Png);
    
                    // Create or overwrite the "myblob" blob with contents from a local file.
                    //using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
    
                    using (var fileStream = ToStream(img,ImageFormat.Png))
                    {
                        blockBlob.UploadFromStream(fileStream);
                    }
                    //get the img URL on blob
                    string blobimgURL = blockBlob.Uri.ToString();
    
                }
                bmp = (Bitmap)img;
                webBrowser.Dispose();
                if (mre != null)
                    mre.Set();
            }
            //convert image to Stream
            public Stream ToStream(Image image, ImageFormat formaw)
            {
                var stream = new System.IO.MemoryStream();
                image.Save(stream, formaw);
                stream.Position = 0;
                return stream;
            }

    And this article will help you (http://www.windowsazure.com/en-us/develop/net/how-to-guides/blob-storage/ ).

    Thanks

     

    Will
    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, August 27, 2013 6:13 AM