Javascript 使用“目标覆盖”保存背景和实际草图
我已经阅读了一些其他问题，很明显我需要使用Javascript 使用“目标覆盖”保存背景和实际草图,javascript,jquery,canvas,sketchjs,Javascript,Jquery,Canvas,Sketchjs,我已经阅读了一些其他问题，很明显我需要使用destination over来保存背景和草图，方法是在旧图像上显示新图像 我使用的代码如下所示： var c=document.getElementById（“myCanvas”）； var ctx=c.getContext（“2d”）； $（“#我的画布”）。草图({ 默认颜色：“红色” }); $（'#下载'）。单击（函数（）{ ctx.globalCompositeOperation=“目的地结束”； img=新图像（）； setAttrib
destination overvar c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
$（“#我的画布”）。草图({
默认颜色：“红色”
});
$（'#下载'）。单击（函数（）{
ctx.globalCompositeOperation=“目的地结束”；
img=新图像（）；
setAttribute（'crossOrigin'，'anonymous'）；
img.src=http://lorempixel.com/400/200/';
ctx.drawImage（img，0,0）；
$（'#url'）.text（c.toDataURL（'/image/png'）；
open（c.toDataURL（'/image/png'）；
});
#我的画布{
背景：url(http://lorempixel.com/400/200/);
}
假设在包含背景的图像顶部有一个SketchJS画布：
#wrapper{positon:relative;}
#bk,#myCanvas{position:absolute;}
<div id='wrapper'>
<img crossOrigin='anonymous' id=bk src='yourImage.png'>
<canvas id="myCanvas" width=500 height=300></canvas>
</div>
下面是示例代码：
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{positon:relative;}
#bk,#myCanvas{position:absolute;}
</style>
<script>
$(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$('#myCanvas').sketch({ defaultColor: "red" });
$('#download').click(function() {
var img=document.getElementById('bk');
ctx.globalCompositeOperation='destination-over';
ctx.drawImage(bk, 0, 0);
ctx.globalCompositeOperation='source-over';
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+c.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag to sketch on the map.</h4>
<button id=download>Download</button>
<div id='wrapper'>
<img crossOrigin='anonymous' id=bk src='https://dl.dropboxusercontent.com/u/139992952/multple/googlemap1.png'>
<canvas id="myCanvas" width=459 height=459></canvas>
</div>
</body>
</html>
正文{背景色：象牙；}
#包装器{position:relative；}
#bk，#myCanvas{位置：绝对；}
$（函数（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
$（'#myCanvas'）.sketch（{defaultColor:“red”}）；
$（'#下载'）。单击（函数（）{
var img=document.getElementById（'bk'）；
ctx.globalCompositeOperation='destination-over'；
ctx.drawImage（bk，0，0）；
ctx.globalCompositeOperation='source-over'；
var html=“右键单击下面的图像并将图片另存为””；
html+=“”；
var tab=window.open（）；
tab.document.write（html）；
});
}); // end$（函数（）{}）；
拖动以在地图上绘制草图。
下载
那么您想要新图形而不是现有图形？如果是，html画布的默认模式是在以前的图形上绘制新图形，因此不需要在目标。“destination over compositing”模式将在现有画布内容的后面绘制新图形。@markE我真正想要的是下载带有背景图像和草图的图像--我想我需要使用destination over来完成此操作，但我仍然不清楚您想要什么。你能更详细地解释一下吗？@markE我正在使用Sketch.JS在画布上绘制背景图像。我现在想下载这个新图像，它将有背景图像和草图，但是使用toDataURL
只会给我草图。概述：如何将图像与草图和背景图像一起保存？@markE如果您使用上述片段，在图像上绘制，单击下载，然后复制并粘贴数据URL-您将看到您只获得草图。我如何获得背景图像呢？啊哈-所以我不得不使用源代码而不是！！非常感谢：）@ᔕᖺᘎᕊ, 不客气，很高兴我能帮上忙。源代码就在那里，用于将画布重置为默认模式，以防您需要进行其他绘图。祝你的项目好运！
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{positon:relative;}
#bk,#myCanvas{position:absolute;}
</style>
<script>
$(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$('#myCanvas').sketch({ defaultColor: "red" });
$('#download').click(function() {
var img=document.getElementById('bk');
ctx.globalCompositeOperation='destination-over';
ctx.drawImage(bk, 0, 0);
ctx.globalCompositeOperation='source-over';
var html="<p>Right-click on image below and Save-Picture-As</p>";
html+="<img src='"+c.toDataURL()+"' alt='from canvas'/>";
var tab=window.open();
tab.document.write(html);
});
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag to sketch on the map.</h4>
<button id=download>Download</button>
<div id='wrapper'>
<img crossOrigin='anonymous' id=bk src='https://dl.dropboxusercontent.com/u/139992952/multple/googlemap1.png'>
<canvas id="myCanvas" width=459 height=459></canvas>
</div>
</body>
</html>