我应该可以在图片上绘图并保存。 我想知道是否有可能允许用户仅绘制地图（形状）？ 这是complate代码： 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()); }I should be able to draw on the picture and save it. I was wondering if there is possibility to allow users to draw over the map(shape) only? Here is the complate code: 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()); }最满意答案
当您希望用户能够以非破坏性方式绘制图像时，您可以创建第二个画布并使用CSS定位将其放置在第一个画布的顶部。 用户现在可以在上面的画布上自由绘制，而下面的画布不受影响，并且仍可通过任何透明的区域看到（顺便说一句，当你不打算在背景上进行任何画布操作时，你可以同样使用普通的旧<img> ）。
如果您想将两个画布都转换成一个可以保存的图像，请创建一个新的离屏画布并使用drawImage将两个画布绘制到它（是的，drawImage可以使用<canvas>作为源，就像它可以采用一个<img> ）。 然后，您可以使用canvas.toDataURL获取画布内容的PNG或JPEG压缩和base64编码的字符串。 然后，您可以根据需要存储该字符串。
When you want the user to be able to draw on an image in a non-destructive way, you can create a second canvas and use CSS positioning to place it on top of the first canvas. The user can now draw freely on the canvas above while the canvas below is unaffected and still visible through any alpha-transparent areas (by the way, when you don't intend to do any canvas-operations at all on the background, you can just as well use a plain old <img>).
When you would like to turn both canvases into one image which you can save, create a new off-screen canvas and draw both canvases to it with drawImage (yes, drawImage can use a <canvas> as a source, just as it can take an <img>). You can then use canvas.toDataURL to get a PNG or JPEG compressed and base64-encoded string of the canvas content. You can then store that string however you want.
更多推荐
发布评论