Convert Canvas to image and save to disc

Question

There are many similar questions already, but for some reason they do not solve my issue.

My project is to save a dynamically created page (or part of the page). The user will have the option to drag objects on screen and leave them in any order and then for this order to be saved to disc as an image.

My own research shows that I can use Draggable from JQuery and this is easy to implement. It is the saving part where I am stuck.

I followed a few links, but the image does not appear to be saving to disc and I don't think it works in IE! However, I'm happy with FireFox and so using the toDataUrl() sounds like the best approach.

Since I couldn't get it work I decided to change tactic slightly and pass the value to the code behind (C#)

The save part of my code looks like

<script>
    function SaveMe() {
        var canvas = document.getElementById("mycanvas");
        var image = canvas.toDataUrl();
        document.getElementById("hideMe").value = image;
    }
</script>

When I debug in FireBug, I never reach document.getElementById("hideMe").value = image;. I step through but can never get past var image = canvas.toDataUrl(); Is this expected behavior as I assume not but there is no error message?

The body of my HTML is

<body>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.popup_click').show(0).draggable();    
        });    
    </script>

    <form id="form1" runat="server">

        <div class="popup_click">
            <div id="popup_title">Title</div>
        </div>

        <canvas id="mycanvas" class="canvas"></canvas>

        <asp:HiddenField ID="hideMe" runat="server" />
        <asp:Button runat="server" OnClick="ClickMe" text="Click" OnClientClick="SaveMe()"/>

    </form>
</body>

What am I doing wrong? I'm working locally in debug mode, Visual Studio 2013.

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

Not absolutely sure, but I also had a problem with todataurl() in the past and this link helped me

Not able to get data url when using images in kinetic js

edited May 23 '17 at 10:31

Community

1
1

answered Oct 17 '13 at 14:12

user2890832

26
2

Can you please share your error which forced you to change your tactics? – user2890832 Oct 17 '13 at 14:14
There are no errors... It just didn't appear to save, as if the toDataUrl is crashing out but the error message is not showing. Although +1 as the site you reference is doing exactly what I need – Dave Oct 17 '13 at 14:15
In the link you posted, if I click save I get a pop up box. When I copy and paste the code to my machine and click save, there is no pop up box. Nothing happens. – Dave Oct 17 '13 at 14:18
sigh.... I used canvas.toDataUrl();, you use canvas.toDataURL();... Note the URL is uppercase! Thanks – Dave Oct 18 '13 at 07:32

score 1 · Answer 2 · answered Oct 17 '13 at 14:18

This is the function I always use when wanting to export a canvas to image, it puts the image into a popup window so the user can do what they want with it (I hope this helps):

function imageCanvas(evt){
    var imageCanvas = document.createElement('canvas');
    imageCanvas.width = document.documentElement.clientWidth;
    imageCanvas.height = document.documentElement.clientHeight;
    var imageCanvasContext = imageCanvas.getContext("2d");
    imageCanvasContext.fillStyle = document.getElementById("body").style.backgroundColor;
    imageCanvasContext.fillRect(0,0,imageCanvas.width,imageCanvas.height);
    imageCanvasContext.drawImage(mainCanvas,0,0,imageCanvas.width,imageCanvas.height,0,0,imageCanvas.width,imageCanvas.height);
    var dataURL = imageCanvas.toDataURL("image/png");
    var imagePopup = window.open("","fractalLineImage","left=0,top=0,width="+(imageCanvas.width/2)+",height="+(imageCanvas.height/2)+",toolbar=0,resizable=0");
    imagePopup.document.write("<title>Export Image</title>");
    imagePopup.document.write("<img id='exportImage'"
    +" alt=''"
    +" height='"+ imageCanvas.height+"'"
    +" width='"+ imageCanvas.width+"'"
    +" style='position:absolute;left:0;top:0'/>");
    imagePopup.document.close();
    var exportImage = imagePopup.document.getElementById("exportImage");
    exportImage.src = dataURL;
}

Convert Canvas to image and save to disc

2 Answers2