【发布时间】：2014-12-29 21:41:17
【问题描述】：
我已经构建了几个 Web 资源，以将签名功能添加到 Microsoft Dynamics CRM 2011 表单中，其中一个内置于 silverlight 作为文件上传器等，另一个内置于 javascript 和 HTML 中，用于在屏幕上进行签名并保存作为图像，但代码仅适用于谷歌浏览器。
我已经阅读了无数的 stackoverflow 线程，但找不到任何答案。
有没有什么方法可以解决的
- 在 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>
【问题讨论】：
-
您的目标是哪个版本的 IE？
-
@nnnnnn 我正在使用 IE11
标签： javascript html canvas todataurl