locked
I need to resize an Image for tile RRS feed

  • Question

  • Hi all, I'm building this Modern UI app with javascript I want to add a tile.

    I want the tile to use live images from the user, like the People's app that comes with Windows 8. The thing is, those images may not be in the correct size for tiles (according to this http://msdn.microsoft.com/en-us/library/windows/apps/hh781198.aspx).

    So my question is, how can I resize web images and save them locally in order to use them on tiles? Can I do it with javascript? should I create a C++ WinRT component?

    Thanks

    p.s: some code snippet would be great!


    http://bit.ly/sebagomez



    Thursday, September 6, 2012 7:31 PM

Answers

  • You can also use the canvas element to resize images and stay in JavaScript.

    I do not have time presently to throw together a sample unfortunately but I believe there is an old forum post in here that shows this technique!

    Basically, you fit an image onto a certain sized canvas and then you can stream that out and use that resized canvas image.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, September 7, 2012 1:46 PM
    Moderator
  • HI

    Please refer to this sample:

    http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc49148

    For the third scenario, you can using image from web.

    And please also take a look at the last scenario.

    • Marked as answer by Dino He Thursday, October 11, 2012 8:07 AM
    Tuesday, September 18, 2012 5:30 AM

All replies

  • Hi

    You can create a C# component(Use C# resize image and save them in local).

    Code like this:

    private static Image resizeImage(Image imgToResize, Size size)
    {
        int sourceWidth = imgToResize.Width;
        int sourceHeight = imgToResize.Height;
        float nPercent = 0;
        float nPercentW = 0;
        float nPercentH = 0;
        nPercentW = ((float)size.Width / (float)sourceWidth);
        nPercentH = ((float)size.Height / (float)sourceHeight);
        if (nPercentH < nPercentW)
           nPercent = nPercentH;
        else
           nPercent = nPercentW;
        int destWidth = (int)(sourceWidth * nPercent);
        int destHeight = (int)(sourceHeight * nPercent);
        Bitmap b = new Bitmap(destWidth, destHeight);
        Graphics g = Graphics.FromImage((Image)b);
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        g.DrawImage(imgToResize, 0, 0, destWidth, destHeight);
        g.Dispose();
        return (Image)b;
    }

    Then use JavaScript work with this component:http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/cae820c4-cb54-48b2-9de7-8235abf2a927/

    Friday, September 7, 2012 5:40 AM
  • You can also use the canvas element to resize images and stay in JavaScript.

    I do not have time presently to throw together a sample unfortunately but I believe there is an old forum post in here that shows this technique!

    Basically, you fit an image onto a certain sized canvas and then you can stream that out and use that resized canvas image.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, September 7, 2012 1:46 PM
    Moderator
  • Thank you Dino & Jeff for your answers.

    I'll try what Dino suggested first, the thing is I can't get System.Drawing.Image in my project. What kind of project should that one be? How do I reference it from my javascript ptoject? I got an error in one of my tries saying "One or more selected items is not a valid reference for this type of project"


    http://bit.ly/sebagomez

    Monday, September 10, 2012 6:12 PM
  • I don't have Bitmap y Windows Runtime :( what kind of project/code is that?

    http://bit.ly/sebagomez

    Monday, September 10, 2012 9:37 PM
  • http://msdn.microsoft.com/en-us/library/windows/apps/windows.graphics.imaging.aspx

    http://software.intel.com/en-us/articles/windows-8-metro-style-app-development-using-winrt-from-c/


    • Edited by KMoon Tuesday, September 11, 2012 3:17 PM
    • Edited by Dino He Tuesday, September 11, 2012 3:25 PM Orignal lost msdn.microsoft.com for the first link
    Tuesday, September 11, 2012 3:17 PM
  • Ok, I've just found a solution following Jeff's javascript recommendation, and this post http://pulkitgoyal.in/2011/06/13/javascript-image-manipulation-using-html5-canvas-element-tutorial/

    Basically this is my code.

    var _newWidth = 310;
    var _newHeight = 310;
    
    function resizeImage() {
    
    	var sourceImage = WinJS.Utilities.query('img[id=sourceImage]')[0];
    
    	var imageManipulationCanvas = document.createElement('canvas');
    	imageManipulationCanvas.width = _newWidth;
    	imageManipulationCanvas.height = _newHeight;
    
    	var imageManipulationCtx = imageManipulationCanvas.getContext('2d');
    	imageManipulationCtx.drawImage(sourceImage, 0, 0, _newWidth, _newHeight); 
    	var resizedImageDataURL = imageManipulationCanvas.toDataURL(); 
    
    	var destImage = WinJS.Utilities.query('img[id=destImage]')[0];
    	destImage.src = resizedImageDataURL;
    
    };

    Thank you all


    http://bit.ly/sebagomez

    • Marked as answer by sebastian gomez Wednesday, September 12, 2012 12:27 AM
    • Unmarked as answer by sebastian gomez Thursday, September 13, 2012 1:24 PM
    Tuesday, September 11, 2012 7:22 PM
  • Ok, I just found two problem to the above code.

    1) it retuns the base64 string of the image and I need a reference to a file :(

    2) later on I found, what I think, is the perfect way if doing that directly from WinJS with getThumbnailAsync the problem is that after I download and shrink the image I get a reference of the find blob:XXXXXXXXX and for some reason that is not working :(

    So frustrating!

    What's the best way of using images from the web in my live tiles? Keep in mind those images are not in the right scale or size. What is the People's tile doing?

    Please help


    http://bit.ly/sebagomez

    Thursday, September 13, 2012 1:29 PM
  • HI

    Please refer to this sample:

    http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc49148

    For the third scenario, you can using image from web.

    And please also take a look at the last scenario.

    • Marked as answer by Dino He Thursday, October 11, 2012 8:07 AM
    Tuesday, September 18, 2012 5:30 AM