Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

how to capture/save image using canvas

javascript html web form

Best Answer Sandile, 08 November 2015 - 11:31 PM

Still not showing anything,in the console...This i s what i get,

 

"Uncaught TypeError: canvas.toDataURL is not a function"

 

I ve tyre search for that error but nothing change.

 

maybe there is a way to use canvas without using table...?

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
10 replies to this topic

#1 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 28 October 2015 - 11:17 PM

Hi all

 

I have been trying to save image that was edited in a dress up application to dress up a doll,but I have tryed using the below code and it do show the image path with an image but the image is black.HAVE ANY IDEAS??(I am still a new)

 

 

//class
namespace itsme
{
    public partial class Creator : System.Web.UI.Page
    {
        static string path = @"C:\Users\startanstr\Pictures\check";
        protected void Page_Load(object sender, EventArgs e)
        {


        }
        [WebMethod()]
        public static void UploadImage(string imageData)
        {




            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";


            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {


                using (BinaryWriter bw = new BinaryWriter(fs))
                {


                    byte[] data = Convert.FromBase64String(imageData);


                    bw.Write(data);


                    bw.Close();
                }


            }


        }


        protected void btnSave_Click(object sender, EventArgs e)
        {
    
 
 
 
 
 
//html code
  <td id="canvas" style="width : 500px; vertical-align: top;">


                    <img class="imgPos" src="img/model1.png"  />
                </td>


// javascript


        <script type="text/javascript">
            // Send the canvas image to the server.
            $(function () {
                $("#btnSave").click(function () {
                    var image = document.getElementById("canvas").toDataURL("image/png");
                    image = image.replace('data:image/png;base64,', '');
                    $.ajax({
                        type: 'POST',
                        url: 'Creator.aspx/UploadImage',
                        data: '{ "imageData" : "' + image + '" }',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (msg) {
                            alert('Image saved successfully !');
                        }
                    });
                });
            });
        </script>


    </div>
   
        <script>
            
//this code add items in doll
              function callitems()
                     {


                $("#list").remove();


                //<!--hair items-->
                var list = "<td id='list' class='animated bounceIn' ><center>";
                list += "<img src='img/prev_hair_1.png' onclick='addHair(\"1\")'>";
                list += "<img src='img/prev_hair_2.png' onclick='addHair(\"2\")'>";
                list += "<img src='img/prev_hair_1.png' onclick='addHair(\"1\")'>";


                list += "</center></td>')";


               $("#items").append(list);
                 }




              function addHair(type) {


                  //<!--Remove all hair -->
                  $(".hair").remove();
                  $(".dress").remove();
                  $(".addholidayclothes").remove();
                  $(".addpyjamas").remove();
                  $(".addHat").remove();
                  $(".addPants").remove();
                
                  //<!--hair1 css-->
                  if (type == '1')
                      $("#canvas").append("<img class='hair imgPos animated fadeIn' src='img/hair1.png' style='margin-top: -628px;' >");
                  else if (type == '2')
                      $("#canvas").append("<img class='hair imgPos animated fadeIn' src='img/hair2.png' style='margin-top: -628px;' >");
              }


              function items() {


                  $("#list").remove();
                  
                  //<!--hair items-->
                  var list = "<td id='list' class='animated bounceIn' ><center>";
                  list += "<img src='img/model5.png' style='width:5%; height:10%' onclick='addDress(\"1\")'>";
                  list += "&nbsp;&nbsp;&nbsp;&nbsp;";
                  list += "<img src='img/Clothing_Holiday1.png' style='width:5%; height:5%' onclick='addDress(\"10\")'>";


                  list += "</center></td>')";


                  $("#items").append(list);
              }

 

 

i would appreciated if any of you have done this 

Thanx In advanced.


Edited by dargueta, 29 October 2015 - 10:42 PM.


#2 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 29 October 2015 - 10:44 PM

Why don't you just upload the image directly instead of base64-encoding it and passing it in a JSON payload?


sudo rm -rf / && echo $'Sanitize your inputs!'


#3 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 29 October 2015 - 10:53 PM

Thanx for reply @dargueta,the thing is I found this code online and i was hoping It would usefull.I am sure maybe you can show me how to upload it image directly instead of base64.

 

Thanx 



#4 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 29 October 2015 - 11:42 PM

Change your $.ajax() call to this:

$.ajax({
    type: 'POST',
    url: 'Creator.aspx/UploadImage',
    data: image,
    contentType: 'image/png',
    headers: {
        'Content-Transfer-Encoding': 'Base64'
    },
    success: function (msg) {
        alert('Image saved successfully !');
    }
});

As for the server-side ASPX, you can check out this step by step tutorial. Ignore the jQuery part, you already have that down.


Edited by dargueta, 29 October 2015 - 11:42 PM.

sudo rm -rf / && echo $'Sanitize your inputs!'


#5 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 02 November 2015 - 06:00 AM

thanks again,INcluded the below code:

 

($.ajax({

type: 'POST',
url: 'Creator.aspx/UploadImage',
data: image,
contentType: 'image/png',
headers: {
'Content-Transfer-Encoding': 'Base64'
},
success: function (msg) {
alert('Image saved successfully !');
}


});)but it still not working 

 

and again in the class i add the path to my C drive from this :

 

  string dirFullPath = HttpContext.Current.Server.MapPath("~/MediaUploader/");

 

to this:

 

 string dirFullPath = HttpContext.Current.Server.MapPath("C:/Users/startanstr/Pictures/check");

 

 

but i just do nothing(refresh the page) and nothing happens :(



#6 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 03 November 2015 - 07:22 PM

Open the developer console in your web browser and see what the server returns. How to do that varies between browsers, so you'll have to look it up.


sudo rm -rf / && echo $'Sanitize your inputs!'


#7 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 08 November 2015 - 11:31 PM   Best Answer

Still not showing anything,in the console...This i s what i get,

 

"Uncaught TypeError: canvas.toDataURL is not a function"

 

I ve tyre search for that error but nothing change.

 

maybe there is a way to use canvas without using table...?



#8 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 09 November 2015 - 08:18 PM

Oh wow I have no idea how I missed this! You're trying to treat a table element as a canvas directly. You need to use a <canvas> element and draw on it, you can't just add and remove HTML elements and expect to render it like that.

 

Check out this tutorial for how to use an HTML5 canvas.


sudo rm -rf / && echo $'Sanitize your inputs!'


#9 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 19 November 2015 - 12:12 AM

Hi I have look at the tutorials and it make sense.I have tried another approach using transparent images matching them using photoshop (place one image to top of  another before putting them to the code)



#10 dargueta

dargueta

    I chown trolls.

  • Moderator
  • 4854 posts

Posted 20 November 2015 - 09:50 PM

Is it working?


sudo rm -rf / && echo $'Sanitize your inputs!'


#11 Sandile

Sandile

    CC Lurker

  • New Member
  • Pip
  • 7 posts

Posted 24 November 2015 - 12:54 AM

yes It working saving using ajax ,here is the code that works

 

 

 

<script>
 
            function saveModel() {
                var list = "";
                $(".imgPos").each(function () {
                    list += $(this).attr('src') + ";";
                });
 
                jQuery.ajax({
                    async: false,
                    url: 'Creator2.aspx/SaveModel',
                    type: "POST",
                    data: "{'list':'" + list + "', 'ModelName' : '" + document.getElementById("txtDollName").value + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function () {
                        alert("Image Saved")
 
                    }
                });
 
 
            }
 
 
 
class
 
  [WebMethod(EnableSession = false)]
        public static void SaveModel(string list, string ModelName)
        {
            
            backbone callBackBone = new backbone();
 
            // Entry table details
            int pos = list.IndexOf(";");
            string Model = list.Substring(0, pos);
            list = list.Replace(Model + ";", "");
            callBackBone.Insertdata("Insert Into Entry (ModelName, DateCreated, MainModelImage) VALUES('" + ModelName + "','" + DateTime.Now.Year.ToString() + "-" + DateTime.Now.Month.ToString() + "-" + DateTime.Now.Day.ToString() + "','" + Model.ToLower().Replace("model", "").Replace(".png", "").Replace("img/", "") + "');");
 
            // Model Items
            string EntryID = callBackBone.CreateTable("Select ID from Entry Order By ID DESC").Rows[0]["ID"].ToString();
            while (list.IndexOf(";") > 0)
            {
                pos = list.IndexOf(";");
                string item = list.Substring(0, pos);
                list = list.Replace(item + ";", "");
                callBackBone.Insertdata("Insert Into Model(EntryId, Image) VALUES(" + EntryID.ToString() + ",'" + item + "');");
            }
 
 
        }
 
the problem i am facing is when I try to receive to images from database It doesn't....
 
 
I still need a code to retrieving them in a coverflow image slide.