在HTML5畫布上繪製並保留更改

我應該可以在圖片上繪製並保存它。我想知道是否有可能讓用戶只繪製地圖（形狀）？這裏是complate代碼： http://codepen.io/anon/pen/VYOXRW 在HTML5畫布上繪製並保留更改

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()); 
}

來源

2015-04-07 Himalay

請不要在一個問兩個問題。當你有兩個不相關的問題時，請單獨詢問。這對你也有好處，因爲這樣你不僅能從可以回答這兩個問題的人那裏得到答案。我自由地刪除了我無法回答的問題。您可以檢索我從編輯歷史記錄中刪除的文本，並將其作爲新問題發佈。 – Philipp

當你希望用戶能夠繪製以非破壞性的方式在圖像上，可以創建第二畫布和使用CSS定位來對放置第一個畫布的頂部。用戶現在可以在上面的畫布上自由繪製，而下面的畫布不受影響，並且通過任何透明區域仍然可見（順便說一下，當您不打算在背景上進行任何畫布操作時，您可以就像使用普通的舊版本<img>一樣）。

當你想關閉這兩個畫布成一個圖像可以保存，創建一個新的屏幕外的畫布，用drawImage畫兩個畫布它（是的，drawImage方法可以使用<canvas>作爲源，只是因爲它可以採取<img>）。然後，您可以使用canvas.toDataURL獲取畫布內容的PNG或JPEG壓縮以及base64編碼的字符串。然後，您可以存儲該字符串，但是您需要。

來源

2015-04-08 13:18:49 Philipp

在HTML5畫布上繪製並保留更改

回答

相關問題