1
Я создал пару веб-ресурсов, чтобы добавить функциональность подписи в форму Microsoft Dynamics CRM 2011, один бит, встроенный в silverlight, в качестве загрузчика файлов и т. Д., А другой в javascript и HTML для создания подпись на экране и сохранить как изображение, но код работает только в Google Chrome.Сохранить холст как изображение Internet Explorer
Я проделал некоторое чтение вокруг бесконечных потоков потоков stackoverflow, но не нашел ответов.
Есть в любом случае, в котором я могу как-то либо
- сохранить холст изображение в IE, то, как текущее решение уже работает в хроме
- Открыть новое окно, так появляется холст изображение и может щелкнуть правой кнопкой мыши и сохранить
Я уже пробовал сделать оба вышеупомянутых, но не повезло.
Это должно быть в 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>
Какую версию (ы) в IE вы таргетирования? – nnnnnn
@nnnnnn Я использую IE11 – Crouch