使用destination-over保存背景和实际草图
我已经阅读了这篇文章和其他一些问题，很清楚我需要使用destination-over来保存背景和草图，方法是将新图像显示在旧图像上。
我将Sketch.js与我的代码一起使用：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
$('#myCanvas').sketch({
defaultColor: "red"
});
$('#download').click(function() {
ctx.globalCompositeOperation = "destination-over";
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = 'http://lorempixel.com/400/200/';
ctx.drawImage(img, 0, 0);
$('#url').text(c.toDataURL('/image/png'));
window.open(c.toDataURL('/image/png'));
});css lang-css prettyprint-override">#myCanvas {
background: url(http://lorempixel.com/400/200/);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>
<canvas id="myCanvas"></canvas>
<input type='button' id='download' value='download'>
<span id='url'></span>小提琴
但那无济于事。点击“下载”仍然只能生成草图。现在，我似乎不明白如何正确使用destination-over。W3Schools似乎无济于事。
谁能给我指出正确的方向吗？
共有1个答案
假设您在包含背景的图像顶部有一个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>
然后，当您希望将草图与背景组合并将其保存为图像时，您可以使用destination-over合成在现有草图的“下方”绘制背景。
ctx.globalCompositeOperation='destination-over';
ctx.drawImage(bk, 0, 0);
下面是示例代码：
<!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>
-
我有一个带有背景图像的HTML5画布元素。用户被允许在图像上绘制，然后需要保存完整的画布元素与背景。我使用下面的代码保存部分，但它只得到画布绘图，而不是背景图像。我还可以做什么来获得背景图像？ 更新： 我的HTML 我有上面的div在我的HTML页面。然后我动态地创建画布并在其上绘制。这是一个有点长的代码。
-
问题内容： 假设我要在CSS中渲染箭头，箭头应具有头部，尾部和灵活的宽度，以便可以包含文本。我当然可以创建多个div来获得所需的内容，但是如何在CSS3中完成呢？ 我可以使用多个背景图片： 的HTML： 这给了我一个带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。 仅使用一张背景图像，您可以执行以下操作： 我知道这在很多方面都是可行的，但是背景颜色属性是否真的从速记定义中丢失了？ 问题
-
下面的外部CSS页面示例中的快速简单问题； 我知道它们会影响不同的元素选择器，我的问题是使用背景和背景图像有什么区别？一方可以访问另一方的特定属性吗？谢谢你。
-
问题内容： 我将签名图像另存为.jpg图片。我使用graphic2d在图像上绘制签名的每个像素（使用签名板获得），它可以正常工作，但我总是得到白色背景。如果我想将签名放在PDF文档上，jpg图像的白色正方形的边框会覆盖PDF的某些单词。 我想要得到的是保存带有透明背景的jpg图像，因此当我将其放置在PDF上时，没有单词被白色图像背景覆盖，只有签名行。 这是保存缓冲图像的代码。它具有白色背景。 我试
-
问题内容： 编辑现有答案以改善此职位。它目前不接受新的答案或互动。 在什么情况下，与CSS相对，使用HTML 标签显示图像更合适，反之亦然？ 影响因素可能包括可访问性，浏览器支持，动态内容或任何类型的技术限制或可用性原则。 问题答案： 正确使用IMG 使用，如果你打算让人们打印您的网页，你想被默认包含在图像。-JayTee 当图像具有重要的语义含义（例如警告图标时，请使用（带有文本）。这确保了可以
-
接口说明 保存场景 如需调用，请访问 开发者文档 来查看详细的接口使用说明 该接口仅开放给已获取SDK的开发者 API地址 POST /wish3dearth/api/scene/v1.0.0/saveScene 是否需要登录 是 请求字段说明 参数 类型 请求类型 是否必须 说明 token string header 是 当前登录用户的TOKEN sceneId string formData