CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 6 of 6
  1. #1
    Join Date
    Aug 2012
    Posts
    53

    Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    Hello all,

    I created a MFC dialog using CDHtmlDialog and added a HTML page with many controls and one of them is a IMAGE tag. I got a default image loaded from the hard drive displayed in the HTML page. Up to this part, everything works fine.

    Now what i want to do is, dynamically change the image based on the user click on one of the HTML buttons. I don't want this image source to be hard coded in the HTML nor the image source send from the MFC app.

    What i want is for the MFC app to send the image data to the HTML in some (binary) format and then the page to display the image.

    The possible option i was thinking of was to read the image file which is already in my hard drive as a binary file and send the binary data across to the HTML as a memory buffer, and then use JavaScript to decrypt this binary data and display the image.

    I am not even sure whether this is possible. So basically what i want is for the HTML page to display a image from the memory.

    Can anyone guide me on how to do this? What approach needs to be taken?

    Thanks in advance.

  2. #2
    Join Date
    Nov 2000
    Location
    Voronezh, Russia
    Posts
    6,620

    Re: Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    Best regards,
    Igor

  3. #3
    Join Date
    Aug 2012
    Posts
    53

    Re: Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    To make the question much more simpler :-)

    1. Can i pass the Image file (JPG, PNG) as a memory buffer like "unsigned char *" from my MFC app to the HTML page and then use some JavaScript function to understand that it's a Image file and display on the HTML page. It can be done either by passing the JPG to the "src" of Image or drawing it on a CANVAS. But all JS/HTML should have is a memory buffer of Image file.

    So the 1st question is,

    1. How to read a Image file as memory buffer (unsigned char *) in MFC? i.e, making sure it doesn't loose any NULL terminators or any binary contents.

    And 2nd question is,

    1. How to pass this memory buffer to the JavaScript function in the HTML page?

    And 3rd question is,

    1. How can the JavaScript function decrypt this memory buffer into a Image file and display in the HTML page?

    The reason why i want to do it this way is because the HTML should never be able to display the Image file from a file path or URL. That is a requirement for the project i am doing.

    HTML page should only use a memory buffer containing the Image file info. Hope this information helps.

    Thanks in advance. I appreciate the 2 earlier responses i got.

  4. #4
    Join Date
    Nov 2000
    Location
    Voronezh, Russia
    Posts
    6,620

    Re: Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    CDHtmlDialog sample: DynImg.zip
    Best regards,
    Igor

  5. #5
    Join Date
    Aug 2012
    Posts
    53

    Re: Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    Thanks a lot for the sample code.

    Is there a way to keep the image size consistent? i.e, height and width be the same when displayed, irrespective of the actual Image size.

    When i try to load different images with varying sizes, i see that the display size also varies.

  6. #6
    Join Date
    Nov 2000
    Location
    Voronezh, Russia
    Posts
    6,620

    Re: Using CDHtmlDialog app, changing images (JPG,PNG) dynamically in the HTML Page

    Quote Originally Posted by Don Guy View Post
    Is there a way to keep the image size consistent? i.e, height and width be the same when displayed, irrespective of the actual Image size.

    When i try to load different images with varying sizes, i see that the display size also varies.
    Not sure about what you mean by 'consistent'. In fact, the code makes any image to scale up/down to fit in 400 x 400 pixels rectangle preserving original aspect ratio. In case you find this inconsistent, please feel free to modify the code any way you want. I just provided a guide, a proof of concept, but your ultimate task is all yours. Have fun!
    Best regards,
    Igor

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured