CODEWITHSUNDEEP
javascripthtmlcanvastodataurl
Crouch
Crouch

Reputation: 896

Save Canvas as Image Internet Explorer

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

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>

Upvotes: 1

Views: 5441

Answers (1)

RickyAYoder
RickyAYoder

Reputation: 991

[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

Upvotes: 2

Related Questions