0

actually i have a div tag that contains an tag plus several other tags which are a small text displayed above the image. So, I need to save the image with its content to a new image. All your ideas are welcome. Thank you.

<div id="bin" class=""> 
  <img id="myImage" src="myImage.jpg" alt="" width="300" height="550" />
      <div class="" >a</div>
      <div class="" >b</div>
      <div class="" >c</div>
 </div>
Ahmed MEZRI
  • 514
  • 1
  • 5
  • 7
  • 1
    Have you tried anything? As far as I know it's close to impossible to do this client side (using HTML5 canvas techniques to render DOM elements on a canvas and dump the results to an image). – Robin van Baalen Apr 24 '13 at 11:30
  • @RobinvanBaalen I've succeeded to save only the image without its data unfortunately. I'm trying now to get those from the browser memory then print them to the new image. thanks a lot – Ahmed MEZRI Apr 26 '13 at 08:46

1 Answers1

0

Doing this client-side sounds challenging. Your best option might be to create a (set of?) C# classes to represent the attributes of the image and related data on the server-side, then use those and attempt to reproduce the image using C#.

Update:

Based on your comment below, sounds as if a viable option would be to Post the image-data to for instance an .ashx, and then do the logic there. You mentioned in a comment that you've already been able to save the image, so now you should be able to process it, once you get the needed parameters. For that, I think an ashx may be the way to go.

Community
  • 1
  • 1
Kjartan
  • 18,591
  • 15
  • 71
  • 96
  • thanks for your help. Actually the problem is i'm using javascript to get the image plus its data then print the new image using C#. – Ahmed MEZRI Apr 26 '13 at 09:04
  • @AhmedMEZRI Ok, so what you really need is a way to "accept" the parameters for the image then? How about posting it to C# using JS? (Updated my answer). – Kjartan Apr 26 '13 at 09:27
  • yes indeed I tried IsPostBack but it doesn't work even i use it with javascript – Ahmed MEZRI Apr 26 '13 at 10:48
  • well done it's solved. Thanks to html2canvas plugin i succeeded to convert the div tag content to a canvas then take a screenshot of the canvas. The Principe is quite simple after any data added above the image, the code will take a screenshot of the canvas so when you press the bottom you'll get the last image. – Ahmed MEZRI Apr 29 '13 at 14:37
  • Cool, @AhmedMEZRI! Would you mind posting the solution as an answer here? It would be interesting to see, and you can accept it as the "correct answer" to your own question. This might be helpful to others facing similar problems later. :) – Kjartan Apr 29 '13 at 14:59
  • I'm sorry it's a tone of code besides it's confidential but you know I will upload summary of it if I have time later. – Ahmed MEZRI Apr 30 '13 at 15:00