Saving canvas element as PNG (SAPUI5)

    Hi,

    I added a canvas element to my page for handwriting (e.g. signatures). Now I want to save this element as an image and later on saving it with some data as an pdf.

    Is there any possibility to save this canvas as an Image with SAPUI5? I only found examples using php for sending data.

    Greetings,
    Sarah

    Hi,I added a canvas element to my page for handwriting (e.g. signatures). Now I want to save this element as an image and later on saving it with some data as an pdf.Is there any possibility to save this canvas as an Image with SAPUI5? I only found examples using php for sending data. Greetings, Sarah

    Saving canvas element as PNG (SAPUI5)

    Very Helpfull

    User Rating: Be the first one !
    Add Comment
    1 Answer(s)

      Hi Sarah,

       

      The toDataURL() would comprise of base64 encoded image data which needs to be posted through an AJAX call to the server. Later on you can decode and convert the image back to respective format through server side coding. (Decoding of base64 canvas image can be achieved in any language).

       

      You don’t require any php script to send to the backend. It can be achieved via simple jQuery or AJAX post method

       

      1. $.post(http://mycustom_backend_url, { img : canvas.toDataURL() })
      2. .done(function(data) {
      3.   alert(“Image Sent to Server “); //on completion
      4. });
      5.  

      .

       

      You can refer the sample client end code. If you need any further clarification you can get back.

       

      Regards,

      Ajain

      Add Comment

        Hi Sarah,

         

        The toDataURL() would comprise of base64 encoded image data which needs to be posted through an AJAX call to the server. Later on you can decode and convert the image back to respective format through server side coding. (Decoding of base64 canvas image can be achieved in any language).

         

        You don’t require any php script to send to the backend. It can be achieved via simple jQuery or AJAX post method

         

        1. $.post(http://mycustom_backend_url, { img : canvas.toDataURL() })
        2. .done(function(data) {
        3.   alert(“Image Sent to Server “); //on completion
        4. });
        5.  

        .

         

        You can refer the sample client end code. If you need any further clarification you can get back.

         

        Regards,

        Ajain

        Add Comment

        Your Answer

        By posting your answer, you agree to the privacy policy and terms of service.