locked
how to crop an image, after using file picker in javascript RRS feed

  • Question

  • Hi !

    How can i get the user to crop an image after selecting the image with the file picker?

    I need the image to be square. 

    Thanks!

    Friday, November 16, 2012 3:32 PM

Answers

  • Hi Mili,

    For Windows Store javascript app, you can use the built-in BitmapEncoder class (WINRT component) to perform image transforming (like scaling or cropping) against some existing pictures. The BitmapEncoder supports pixel level manipulation. Therefore, you can just write your own transform function by converting other existing image processing library (in .NET or other language) to js syntax.

    #Processing image files (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465103.aspx

    #How to edit an image (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj218353.aspx

    For other existing javascript based image processing component, most of them rely on the HTML 5 canvas object and you need to check the cross browser compatibiliy before using it in Windows Store app (or other webbrowser based web apps). Here is one online thread discussing on this:

    http://stackoverflow.com/questions/3351122/what-is-the-best-javascript-image-processing-library


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, November 22, 2012 2:26 PM
    Monday, November 19, 2012 6:08 AM
    Moderator

All replies

  • There are a number of Javascript image libraries out there that could help you with this. Just bing "javascript image library".

    Tarek Ayna www.BluGraphingCalculator.com Blu Graphing Calculator is Calculator ReImagined for Windows 8

    Sunday, November 18, 2012 11:16 AM
  • Hi Mili,

    For Windows Store javascript app, you can use the built-in BitmapEncoder class (WINRT component) to perform image transforming (like scaling or cropping) against some existing pictures. The BitmapEncoder supports pixel level manipulation. Therefore, you can just write your own transform function by converting other existing image processing library (in .NET or other language) to js syntax.

    #Processing image files (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh465103.aspx

    #How to edit an image (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj218353.aspx

    For other existing javascript based image processing component, most of them rely on the HTML 5 canvas object and you need to check the cross browser compatibiliy before using it in Windows Store app (or other webbrowser based web apps). Here is one online thread discussing on this:

    http://stackoverflow.com/questions/3351122/what-is-the-best-javascript-image-processing-library


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Thursday, November 22, 2012 2:26 PM
    Monday, November 19, 2012 6:08 AM
    Moderator
  • Thank you so much!
    Monday, November 19, 2012 11:53 AM