locked
How do I add a captured image from webview to clipboard?

    Question

  • I have some stuff rendered by javascript in webview. I need to capture a bitmap of the rendered stuff from webview and add it to clipboard. How do I do this?

    As I understand it CapturePreviewToStreamAsync captures the entire webview window, correct?  I just want whatever that's there.  So, say I have a white window with an x in the middle, I want a captured image of just the x in the middle instead of a whole white window with an x in the middle.  How would I do this?

    Many thanks.

    Wednesday, December 24, 2014 6:26 AM

Answers

All replies

  • Hi RandyPete,

    As I understand it CapturePreviewToStreamAsync captures the entire webview window, correct? 

    ->Yes you are correct, and the whole UIElement will be captured.

    However personally I thought your scenario is a bit difficult to achieve, if you have the image in the HTML page which cannot display with a "x" ("x" actually means the image load fail, you can use other default image instead if you need, also in XAML), pass the image path out to the XAML and use a Image control as a container, you may capture the image control later on by the RenderTargetBitmap class

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Thursday, December 25, 2014 2:52 AM
    Moderator
  • Hi RandyPete,

    As I understand it CapturePreviewToStreamAsync captures the entire webview window, correct? 

    ->Yes you are correct, and the whole UIElement will be captured.

    However personally I thought your scenario is a bit difficult to achieve, if you have the image in the HTML page which cannot display with a "x" ("x" actually means the image load fail, you can use other default image instead if you need, also in XAML), pass the image path out to the XAML and use a Image control as a container, you may capture the image control later on by the RenderTargetBitmap class

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Can you please elaborate on this?  I want to take a bitmap image of only the equation part of the webview.  Please look at the screenshot to see what I mean.
    Thursday, December 25, 2014 3:23 AM
  • Hi RandyPete,

    Another possibility is to render the image by some JavaScript code (probably you may need some third party library) and encrypt the image as base 64 string. By using extern.notify() pass the string to the Windows Store App and then we can use the image by decrypt it.

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, December 25, 2014 6:55 AM
    Moderator
  • Ok, I've been able to convert an element of the html in webview to an image.

    Can you please tell me how I can copy an image to the clipboard in javascript?

    Thursday, December 25, 2014 8:13 PM
  • Hi RandyPete,

    The things might be a bit complicate in your scenario.

    1, You are able to convert the html in webview to a image, and now, convert the image to a base64 string: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript

    2, Using external.notify() to pass the base 64 string out to your Windows Store App

    3, Convert the base 64 string to your image: http://stackoverflow.com/questions/14855722/read-base64-image-with-c-sharp-in-a-windows-8-app

    4, Copy the image to the Clipboard.

    Done.

    ==Update==

    Looks like HTML5 support Clipboard: clipboardData

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    Monday, December 29, 2014 7:22 AM
    Moderator
  • Hi RandyPete,

    The things might be a bit complicate in your scenario.

    1, You are able to convert the html in webview to a image, and now, convert the image to a base64 string: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript

    2, Using external.notify() to pass the base 64 string out to your Windows Store App

    3, Convert the base 64 string to your image: http://stackoverflow.com/questions/14855722/read-base64-image-with-c-sharp-in-a-windows-8-app

    4, Copy the image to the Clipboard.

    Done.

    ==Update==

    Looks like HTML5 support Clipboard: clipboardData

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    I almost killed myself, but I finally got it working.  I thank you for your time and patience :)
    Friday, March 20, 2015 4:58 PM