Question

我正在使用fabricjs canvas进行设计。使用java脚本下载图像文件。但下载后无法看到图像边框。

代码示例：

<canvas id="c" runat="server" style="border:2px solid black;" ></canvas>
<img alt="" src="" id="finalImge" runat="server" style="border:2px solid black;" />
function DownloadDesign()
{
    var canvas = document.getElementById('c').fabric;
    var img = document.getElementById('finalImge');
    img.src = canvas.toDataURL("image/png");
    var a = $("<a>").attr("href", img.src).attr("download", "Design.png").appendTo("body");
    a[0].click();
    a.remove();
}

Answer 1

这是正常的

你的边框不在画布

如果你想要边框，你必须在画布上添加边框

Answer 2

例如： http://jsfiddle.net/yvqmp1so/

var boundingBox = new fabric.Rect({
  fill: "transparent",
  width: 590,
  height: 590,
  stroke: "red",
  strokeWidth: 10,
  selectable: false
});
canvas.add(boundingBox);

已下载的图片没有边框

2 个答案: