Save Canvas as Image Internet Explorer

Question

I've built a couple of web resources to add signature functionality to a Microsoft Dynamics CRM 2011 form one bit built in silverlight as a file uploader etc. and the other in javascript and HTML to do the signature on the screen and save as an image but the code only works in google chrome.

I've done some reading around looked on endless amounts of stackoverflow threads but can't find any answers.

Is there anyway in which I can somehow either

save the canvas image in IE, the way the current solution already works in chrome
Open up a new window so the canvas image appears and can be right clicked and saved

I've tried doing both of the above already but had no luck.

It has to be in javascript also

    <html><head>
    <script type="text/javascript">
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;

    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }

    function color(obj) {
        switch (obj.id) {
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 50;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
        }

            function downloadCanvas(link, canvasId, filename) {
var test = document.getElementById(canvasId).toDataURL();
            link.href = document.getElementById(canvasId).toDataURL();
            link.download = filename;
window.open(test);
        }

        /** 
         * The event handler for the link's onclick event. We give THIS as a
         * parameter (=the link element), ID of the canvas and a filename.
        */
        document.getElementById('download').addEventListener('click', function() {
            downloadCanvas(this, 'can', 'signature.png');
        }, false);
</script>
<meta><meta><meta charset="utf-8"></head>
<body onload="init()">
    <canvas width="400" height="200" id="can" style="border: 2px solid currentColor; left: 10px; top: 10px; position: absolute; background-color: rgb(255, 255, 255);"></canvas>
    <div style="left: 450px; top: 10px; position: absolute;">Choose Color</div>
    <div id="black" style="background: black; left: 550px; top: 15px; width: 19px; height: 19px; position: absolute;" onclick="color(this)"></div>
    <div style="left: 450px; top: 40px; position: absolute;">Eraser</div>
    <div id="white" style="background: white; border: 2px solid currentColor; left: 550px; top: 45px; width: 15px; height: 15px; position: absolute;" onclick="erase()"></div>
    <img id="canvasimg" style="left: 52%; top: 10%; position: absolute;">
    <a class="button" id="download" style="left: 10px; top: 220px; position: absolute;" onclick="downloadCanvas(this, 'can', 'test.png')" href="#">Download</a>


</body></html>

Answer 1

[FINAL ANSWER/EDIT]

Open a new window, and set the innerHTML property of the body to:

<img src="[DATA URI GOES HERE]"/>

According to MSDN, the toDataURL() method works in IE >= 9.

canvasElement.toDataURL(imageMimeType,quality)

imageMimeType can be "image/png", " image/jpg", "image/webp" and I believe "image/gif" as well.

To achieve what you wish to do, you could set an anchor with the href of the canvas data URI, or even use window.open to open the data URI in a new tab.

Saving Image in Same Tab : Another StackOverflow Question

Resources for Data URIs : http://en.wikipedia.org/wiki/Data_URI_scheme https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Save Canvas as Image Internet Explorer

Question

1 answers

solution1
2 ACCPTED 2014-12-29 12:22:12

Save Canvas as Image Internet Explorer

Question

1 answers

solution1 2 ACCPTED 2014-12-29 12:22:12

solution1
2 ACCPTED 2014-12-29 12:22:12