0

所以，我在使用 html5 画布元素上的草图功能时遇到了一些问题。因此，可以在下面的 jsfiddle 链接中找到设置。注意：根据您的屏幕空间，您可能需要展开结果窗格。

http://jsfiddle.net/8UU3x/

所以，我在这里看到了一些调整画布大小的问题，但没有足够具体的内容来真正帮助我。所以我想做的是使用画布在背景图像上做一些标记（包含在单独的 div 中）。

<div id="dvPage" style="background-color:#ffffff;"><img id="imgFull" src="http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png" alt="" border="0" style="width:25px;" /></div>
<div id="dvProtector" style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;background: url('http://s15.postimg.org/5zng0yvdn/sample_jsfiddle.png') no-repeat -200px -200px;z-index:100;"></div>

正如您在 jsfiddle 中看到的那样，您最初可以这样做，但在实际设计中，用户可以放大/缩小图像。这样做，您可以看到初始标记不会跟随图像（即，如果您在“示例文本到下划线”下划线，然后点击调整大小，下划线部分将不再下划线）。现在，我知道如何在发生这种情况时调整画布的大小，但我不知道如何制作它，以便标记跟随它。我确实在某个地方看到我可以将标记转换为 data/64 编码并可能缩小它。问题是它不能很好地扩展（像素化）。

此外，用户在放大/缩小后仍应能够进行标记。那么，有没有好的方法呢？我听说过缩放图像，但是在调整大小后继续标记文档时遇到了问题（鼠标偏离标记）。任何帮助都会很棒。谢谢！

4

1 回答 1

0

好吧，我想通了。所以我做了以下

var img = new Image();
img.src = myCanvas.toDataURL();
myCanvas.attr('width', newWidth);
myCanvas.attr('height', newHeight);
var context = myCanvas.getContext('2d')
context.drawImage(img, 0, 0, newWidth, newHeight);

现在这可以拉伸图像，因此它并不完美。这是我要使用的解决方案。

于 2014-01-21T13:31:09.463 回答