context.drawImage 函数不允许织物 Js 中的图像持久性答案

【问题标题】：context.drawImage function doesn't allow image persistence in fabric Jscontext.drawImage 函数不允许织物 Js 中的图像持久性
【发布时间】：2015-09-17 00:03:54
【问题描述】：

我在画布上使用织物 Js：我正在为一个电子商务网站开发一个产品页面，其中我已经绘制了一个背景图像并在其上创建了一个多边形，然后在多边形内部我上传了图像，效果很好。

但是现在我必须在多边形内为每个图像创建一个图像裁剪功能，以便当我点击它时可以裁剪它。

我使用过画布 context.drawImage();。可以正常工作的功能，但是当我单击图像或画布上的其他任何位置时，它会消失并且我无法选择它。有人可以帮我吗？

代码如下

 var image = new Image();
 image.src = "uploads/cat.jpg";
image.onload = function(){
context.drawImage(image, 0, 19, 69, 97, 300, 100, 103, 145);
context.Image.selectable = true;
}

【问题讨论】：

标签： javascript html canvas fabricjs

【解决方案1】：

我可能会在没有看到更多上下文的情况下在这里遗漏一些东西，但我认为如果您使用 fabric.Image 功能来绘制图像而不是 context.draw 图像，它可能会起作用吗？似乎混合织物功能和常规画布绘图可能会出现问题。 image.Fabric

对不起，如果我误解了！我对您的图像/形状堆栈顺序的描述有点模糊，如果此答案不适用，屏幕截图可能会有所帮助。

【讨论】：

实际上的场景是我有一个画布和织物 js 我在其中绘制多边形，并在多边形内剪辑我的图像。现在我想裁剪这些图像，所以当我用谷歌搜索时，我发现了 drawImage();这项工作的方法。我尝试了 fabric.image 方法，但我无法用它裁剪我的图片。它会在我的画布上添加一个新的图像对象。