Сохранить холст как изображение Internet Explorer

Я создал несколько веб-ресурсов для добавления функциональности подписи в форму Microsoft Dynamics CRM 2011, один бит встроен в silverlight для загрузки файлов и т. Д., А другой - в javascript и HTML, чтобы сделать подпись на экране и сохранить ее как изображение. но код работает только в Google Chrome.

Я немного перечитал, просмотрел бесконечное количество потоков в стеке, но не могу найти ответов.

Есть ли в любом случае, в котором я могу как-то

  • сохранить изображение холста в IE, как текущее решение уже работает в Chrome
  • Откройте новое окно, чтобы появилось изображение холста, которое можно было щелкнуть правой кнопкой мыши и сохранить

Я уже пытался сделать оба вышеперечисленных, но безуспешно.

Это также должно быть в javascript

    <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>
Источник

1 ответ

Решение

[ЗАКЛЮЧИТЕЛЬНЫЙ ОТВЕТ / РЕДАКТИРОВАТЬ]

Откройте новое окно и установите для свойства innerHTML тела значение:

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

Согласно MSDN, метод toDataURL() работает в IE> = 9.

canvasElement.toDataURL (imageMimeType, качество)

imageMimeType может быть "image/png", " image/jpg", "image/webp", и я считаю, что "image/gif" также.

Чтобы добиться того, что вы хотите сделать, вы можете установить привязку с помощью ссылки на URI данных холста или даже использовать window.open, чтобы открыть URI данных в новой вкладке.

Сохранение изображения в той же вкладке: еще один вопрос Stackru

Ресурсы для URI данных: http://en.wikipedia.org/wiki/Data_URI_scheme https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Источник
Другие вопросы по тегам