function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
David WrightDavid Wright 

Saving HTML5 Canvas as a .jpg attachment

I'm trying to implement a mobile Visualforce page that allows a user to draw a picture (using HTML Canvas), obtain the canvas as an image using the canvas.toDataURL() method, and save that image back to Salesforce as an attachment.

 

I've attempted to pass the toDataURL() result back to the controller using an actionfunction with a parameter, however when the following code runs, I'm receiving the message "Argument 1 cannot be null", so the result of toDataURL() isn't getting passed to the action function for some reason. Can anyone comment on why they think that's happening, or offer an alternative to accomplsih what I'm trying to do?

 

    <apex:form >
        <apex:inputHidden id="theImg" value="{!img}" />
        <div id="container" > 
            <canvas id="sketchpad" width="766" height="600"> 
                Sorry, your browser is not supported.
            </canvas>     
        </div>           
        <div id="not_container" style="border:2px solid #AAA;margin-top:25px;width:766px;height:100px;">
          <input type="button" value="Save Image" style="height:100%;width:25%" onclick="saveImage();"/>
          <script type="text/javascript">
              function saveImage() {
                  var canvas = document.getElementById("sketchpad").toDataURL("img/jpg");
                  submitToController(canvas);
              }
          </script>
          <apex:actionFunction name="submitToController" action="{!saveImage}">
              <apex:param name="myImg" value="" />
          </apex:actionFunction>
        </div>
    </apex:form>

 

MVP AdminMVP Admin
Hi David,

Were you able to make this application work?

Thanks,
Ambily
David WrightDavid Wright
Unfortunately, no :( The project didn't end up going forward so I didn't pursue it further.