在HTML5画布上绘制并保留更改

Question

我应该能够在图片上绘制并保存它。我想知道是否有可能只允许用户在地图（形状）上绘制？这是完整的代码：http://codepen.io/anon/pen/VYOXRW

var ctx, color = '#FF0000';
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
    newCanvas();
}, 1000);
}, false);
 function newCanvas() {
document.getElementById("content").style.height = window.innerHeight + 100;
var canvas = '<canvas id="canvas" width="' + window.innerWidth + '" height="' + (window.innerHeight + 50) + '"></canvas>';
document.getElementById("content").innerHTML = canvas;
ctx = document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = color;
ctx.lineWidth = 10;
var image = new Image();
image.src = 'http://4.bp.blogspot.com/-_laBnztzAG8/Ub7mDK4Z3qI/AAAAAAAABu4/LBPUeAVeJcc/s1600/CA+KATHMANDU+VALLEY_HU.png';
image.onload = function() {
    var canvas = document.getElementById("canvas");
    var iWidth = image.width / 3;
    var iHeight = image.height / 3;
    ctx.drawImage(image, (canvas.width - iWidth) / 2, (canvas.height - iHeight) / 2, iWidth, iHeight);
};
drawTouch();
drawMouse();
}
 function selectColor(el) {
color = window.getComputedStyle(el).color;
ctx.beginPath();
ctx.strokeStyle = color;
}
 var drawTouch = function() {
var start = function(e) {
    ctx.beginPath();
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY;
    ctx.moveTo(x, y);
};
var move = function(e) {
    e.preventDefault();
    x = e.changedTouches[0].pageX;
    y = e.changedTouches[0].pageY;
    ctx.lineTo(x, y);
    ctx.stroke();
};
document.getElementById("canvas").addEventListener("touchstart", start, false);
document.getElementById("canvas").addEventListener("touchmove", move, false);
 };
var drawMouse = function() {
var clicked = 0;
var start = function(e) {
    clicked = 1;
    ctx.beginPath();
    x = e.pageX;
    y = e.pageY;
    ctx.moveTo(x, y);
};
var move = function(e) {
    if (clicked) {
        x = e.pageX;
        y = e.pageY;
        ctx.lineTo(x, y);
        ctx.stroke();
    }
};
var stop = function(e) {
    clicked = 0;
};
document.getElementById("canvas").addEventListener("mousedown", start, false);
document.getElementById("canvas").addEventListener("mousemove", move, false);
document.addEventListener("mouseup", stop, false);
};
 function saveBtn() {
console.log(document.getElementById('canvas').toDataURL());
}

Answer 1

当您希望用户能够以非破坏性的方式在图像上绘制时，您可以创建第二个画布，并使用CSS定位将其放置在第一个画布的顶部。用户现在可以在上面的画布上自由绘制，而下面的画布不受影响，通过任何alpha透明区域仍然可见（顺便说一句，当你根本不打算在后台进行任何画布操作时，你也可以使用普通的旧<img>）。

当您想将两个画布转换为一个可以保存的图像时，请创建一个新的屏幕外画布，并使用drawImage将这两个画布绘制到其中（是的，drawImage可以使用<canvas>作为源，就像它可以使用<img>一样）。然后，您可以使用canvas.toDataURL来获得画布内容的PNG或JPEG压缩和base64编码的字符串。然后，您可以随心所欲地存储该字符串。