个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
如何使用fabric.js在 Canvas 上加载的图像上实现裁剪工具？我在 Canvas 上加载了一个图像。现在我想实现裁剪工具，允许用户裁剪图像并在完成后将其重新加载到 Canvas 上。
最佳答案
(这个答案是对 Tom's 答案中的 fiddle 的迭代。谢谢你，汤姆，让我走上这条路。)
您可以使用 fabric.Object.clipTo() 在 Fabric.js 中进行裁剪或fabric.Object.toDataURL() 。 clipTo() 方法保留原始图像并通过蒙版显示裁剪。 toDataURL() 方法创建一个新图像。
我的完整示例使用 clipTo() 方法。我在最后添加了一小段代码，显示了 toDataURL() 方法。
解决方案1
摘要
与汤姆的回答不同
在汤姆的回答中，有一些小事情我想改变。所以在我的例子中差异是
裁剪框从左到右和从右到左工作(Tom 的工作仅从右到左)
您有不止一次机会绘制裁剪框(尝试在 Tom 中重新绘制裁剪框会导致框跳转)
适用于 Fabric.js v1.5.0
更少的代码。
代码
// set to the event when the user pressed the mouse button down
var mouseDown;
// only allow one crop. turn it off after that
var disabled = false;
var rectangle = new fabric.Rect({
fill: 'transparent',
stroke: '#ccc',
strokeDashArray: [2, 2],
visible: false
});
var container = document.getElementById('canvas').getBoundingClientRect();
var canvas = new fabric.Canvas('canvas');
canvas.add(rectangle);
var image;
fabric.util.loadImage("http://fabricjs.com/lib/pug.jpg", function(img) {
image = new fabric.Image(img);
image.selectable = false;
canvas.setWidth(image.getWidth());
canvas.setHeight(image.getHeight());
canvas.add(image);
canvas.centerObject(image);
canvas.renderAll();
});
// capture the event when the user clicks the mouse button down
canvas.on("mouse:down", function(event) {
if(!disabled) {
rectangle.width = 2;
rectangle.height = 2;
rectangle.left = event.e.pageX - container.left;
rectangle.top = event.e.pageY - container.top;
rectangle.visible = true;
mouseDown = event.e;
canvas.bringToFront(rectangle);
}
});
// draw the rectangle as the mouse is moved after a down click
canvas.on("mouse:move", function(event) {
if(mouseDown && !disabled) {
rectangle.width = event.e.pageX - mouseDown.pageX;
rectangle.height = event.e.pageY - mouseDown.pageY;
canvas.renderAll();
}
});
// when mouse click is released, end cropping mode
canvas.on("mouse:up", function() {
mouseDown = null;
});
$('#cropB').on('click', function() {
image.clipTo = function(ctx) {
// origin is the center of the image
var x = rectangle.left - image.getWidth() / 2;
var y = rectangle.top - image.getHeight() / 2;
ctx.rect(x, y, rectangle.width, rectangle.height);
};
image.selectable = true;
disabled = true;
rectangle.visible = false;
canvas.renderAll();
});<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>
</head>
<body>
<canvas style="border: 1px solid black" id="canvas"></canvas>
<button id=cropB>crop</button>
</body>解决方案2
或者，我们可以使用 toDataURL() 生成新图像，而不是像上面那样使用 clipTo()。像这样的东西
$('#cropB').on('click', function() {
image.selectable = true;
disabled = true;
rectangle.visible = false;
var cropped = new Image();
cropped.src = canvas.toDataURL({
left: rectangle.left,
top: rectangle.top,
width: rectangle.width,
height: rectangle.height
});
cropped.onload = function() {
canvas.clear();
image = new fabric.Image(cropped);
image.left = rectangle.left;
image.top = rectangle.top;
image.setCoords();
canvas.add(image);
canvas.renderAll();
};
});
关于javascript - 使用 FabricJs 的裁剪功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18732876/
25
4
0
我需要向现有对象属性集引入一些其他属性。 喜欢: ID 地理位置 等 每当我绘制形状时，都需要向该形状添加其他属性，并且需要从toDataLessJSON()获取 最佳答案 从1.7.0版开始，lev
有什么方法可以防止在缩放对象组时发生翻转？ 我尝试了“lockScalingFlip”属性。但它仅在缩放单个对象时受支持。 最佳答案 在版本 1.4.11 中，设置 lockScalingFlip=t
我正在使用 fabric js。今天我遇到了这个问题“如何检查 fabricjs 文本是多行的？”。请帮我解决这个问题。提前致谢。 最佳答案 fabricjs 文本有一个 _textLines 属性。
clipTo 函数自 2.0 起已被弃用，是否有任何替代品或该功能刚刚被删除？ 最佳答案 他们仍在努力(Clipping API) https://github.com/fabricjs/fabric
如果使用clone()方法克隆fabric.Path对象，则路径对象不会重复。我在这里看到了这个问题 https://github.com/kangax/fabric.js/issues/330但Fa
我正在尝试将文本显式设置为文本框，在较旧的 fabricjs 版本中 object.setText("something") 在fabric js版本2中工作但不工作。这个版本中引入了其他任何方式吗？
我有一个 fabricjs Canvas ，我需要输入 PDF，类似于加载图像的方式。我希望在加载到 Canvas 上之前我需要通过 PDFjs 将 PDF 转换为 PNG 吗？ docume
我可以上传背景图片。但我不知道如何拉伸(stretch)才能覆盖整个 Canvas 。示例代码 var fr = new FileReader; fr.onload = function() {
我正在尝试在 FabricJs Canvas 内绘制按钮的网格/数组(p*p)。我能够创建所需的网格/数组。 但我无法在相同高度和宽度的 block 内绘制/放置按钮。 HTML: Create
我有一个 fabricjs Canvas ，上面有一个可以打开和关闭绘图的按钮。如何将自定义控件应用于我绘制的任何/所有绘制对象；例如，我想选择我画的任何一条线，并且只能旋转它们。我已阅读 the e
我想在移动/调整大小/缩放/拖动时将对象的不透明度设置为 0.5。 我们确实为所有这些事件处理程序提供了事件处理程序，但是当其中任何一个启动时，它们只会被触发一次。我想在事件完成后使对象不透明度=1。
我正在使用 fabric js 来调整对象大小，我希望用户在最小和最大限制内调整对象大小。如何使用fabric js做到这一点。 我尝试过类似的属性 lockScalingX,lockScalingY
我已在 SVG 对象和 SVG 对象内的路径上设置自定义属性。 我添加到 Canvas 的每个对象也被分配了一个“id”属性，以及我用来与应用程序中的对象交互的其他一些属性。 到目前为止，当我克隆这些
如何在fabricjs中获取对象标识符？ 例如 var text = new fabric.IText('hello world', { left: mouse1X, top: mouse1Y });
Fabric.js 2.3.6 我正在尝试将对象剪辑到使用自由绘图灌木绘制的路径上。代码无法在路径内显示图像，我不确定我做错了什么。 可以剪裁多个对象，因此我无法将路径应用于 Canvas 本身。 l
有没有办法只在 Canvas 对象的一侧给笔画？例如，我只想为顶部提供笔划。 当我申请时"strokeWidth:1" ，它适用于所有方面。我还没有找到任何属性或方法来解决我的问题。 最佳答案 对于已
我正在使用 Fabric.js 在 Canvas 上绘制一些矩形。默认行为是在矩形内单击以选择它。如何更改行为，使其仅在单击矩形边框时才被选中？ 单击矩形内部而不是边框应该什么都不做。 您可以通过
据我所知，当使用角控件调整对象的大小时，无论用户将鼠标移到何处，高度和宽度都会按比例更改，以保持对象的长宽比。我的客户希望用户在使用角控件时能够独立于宽高比调整高度和宽度。是否有允许设置的设置？ 最佳
如何将组内三角形的 Canvas 相对位置(顶部，左侧)作为波纹管图像？ 我关注了这个话题:How to get the canvas-relative position of an object t
我正在创建一个简单的组，其中包含圆圈和文本，我希望文本位于圆圈的中心。 (就像 Fabricjs.com 首页上的小组演示一样!) var text = new fabric.Text('hello
我是一名优秀的程序员,十分优秀！