- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用 FabricJS 和 clipPath 属性实现了图像裁剪。
问题是裁剪后如何使图像适合 Canvas ?我希望裁剪后的图像填充 Canvas 区域,但不知道是否可以使用 fabric js。
所以我希望在用户单击“裁剪”按钮后图像的选定部分适合 Canvas 大小:
关于代码:我在 Canvas 上画了一个矩形,用户可以调整它的大小和移动它。之后,用户可以单击“裁剪”按钮并获得裁剪后的图像。但是裁剪后的部分与原始图像上的大小保持相同,而我希望它可以缩放并适合 Canvas 。
注意:我尝试使用像 scaleToWidth 这样的方法。此外,我将 absolutePositioned 设置为 true 用于选择矩形。我尝试将此属性设置为 false 以缩放到图像,但没有帮助。
请不要建议使用 cropX 和 cropY 属性代替 clipPath 进行裁剪,因为它们不能正确处理旋转图像。
HTML:
<button>Crop</button>
<canvas id="canvas" width="500" height="500"></canvas>
JS:
// crop button
var button = $("button");
// handle click
button.on("click", function(){
let rect = new fabric.Rect({
left: selectionRect.left,
top: selectionRect.top,
width: selectionRect.getScaledWidth(),
height: selectionRect.getScaledHeight(),
absolutePositioned: true
});
currentImage.clipPath = rect;
canvas.remove(selectionRect);
canvas.renderAll();
});
var canvas = new fabric.Canvas('canvas');
canvas.preserveObjectStacking = true;
var selectionRect;
var currentImage;
fabric.Image.fromURL('https://www.sheffield.ac.uk/polopoly_fs/1.512509!/image/DiamondBasement.jpg', img => {
img.scaleToHeight(500);
img.selectable = true;
canvas.add(img);
canvas.centerObject(img);
currentImage = img;
canvas.backgroundColor = "#333";
addSelectionRect();
canvas.setActiveObject(selectionRect);
canvas.renderAll();
});
function addSelectionRect() {
selectionRect = new fabric.Rect({
fill: 'rgba(0,0,0,0.3)',
originX: 'left',
originY: 'top',
stroke: 'black',
opacity: 1,
width: currentImage.width,
height: currentImage.height,
hasRotatingPoint: false,
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'black',
borderColor: 'black',
});
selectionRect.scaleToWidth(300);
canvas.centerObject(selectionRect);
selectionRect.visible = true;
canvas.add(selectionRect);
}
这是我的 jsfiddle:https://jsfiddle.net/04nvdeb1/23/
最佳答案
这几天我也遇到了同样的问题。但是我找不到任何解决方案,即使我也发现了您的 SO 问题和 github 问题。我认为 clipPath 是使用漂亮的可调节 musk 剪切图像的最佳选择。
在按钮回调函数中,你必须这样实现
第 1 步:首先您必须创建一个 Image 实例来保存裁剪后的图像
let cropped = new Image();
第 2 步:您必须使用 Canvas.toDataURL() 将 canvas 元素导出到 dataurl 图像。这里只想导出选择矩形或蒙版矩形,所以我们传递了 mast rect left、top、width 和 height
cropped.src = canvas.toDataURL({
left: rect.left,
top: rect.top,
width: rect.width,
height: rect.height,
});
第 3 步:在加载图像后的最后一步,我们清除 Canvas 。使用我们裁剪的图像创建新对象,并设置一些选项并重新渲染 Canvas
cropped.onload = function () {
canvas.clear();
image = new fabric.Image(cropped);
image.left = rect.left;
image.top = rect.top;
image.setCoords();
canvas.add(image);
canvas.renderAll();
};
我实际上是 marged Crop Functionality using FabricJs #soution2 你的问题。
关于javascript - Fabric JS clipPath : how to fit the image to the canvas after cropping?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60816668/
我刚刚偶然发现Fabric并且文档并没有真正说明它是如何工作的。 我有根据的猜测是您需要在客户端和服务器端都安装它。 Python 代码存储在客户端,并在命令运行时通过 Fabric 的有线协议(pr
以下是我对 Hyperledger Fabric 系统的理解。如果有任何不正确的地方,请告诉我。 1) 所以我们有同行(背书人、 anchor 人、将军(拥有分类帐的人)、排序人)。此外,当我们设置结
我部署了一个持久性级别为 Silver 的全新 Service Fabric 集群,fabric:/System/InfrastructureService/FE 服务运行状况不佳,并出现以下错误:
我对使用 Fabric 很感兴趣,api 在未连接到互联网时如何工作? 我发现 firebase(与此工具类似的工具)会将数据存储在本地,然后对服务器进行批量更新。但是,超过 72 小时的任何内容都不
Fabric CA Server 和 Fabric CA Client 的功能是什么? Fabric CA 服务器和 Fabric CA 客户端的角色是什么? 谢谢 最佳答案 Fabric CA 提供
我想在不同的环境中使用相同的应用程序,我在 documentation 中找到了它, Apps with Multiple Environments Let’s say you have an app
我目前正在尝试学习 Hyperledger Fabric,我设法了解了如何设置网络(Orderer、Peers 等),但现在是链代码的一部分。 但是,我发现两个不同的 git 存储库(据我所知)可用于
我在 following this tutorial 时遇到错误 cannot convert from 'System.Fabric.StatelessServiceContext' to 'Sys
在我没有改变任何东西之前它可以工作,但今天我收到了这个错误,这里是我的 gradle buildscript { repositories { mavenCentral() maven
Fabric beta 手动分发有时不会发送邀请电子邮件,即使在它向该人显示“已邀请”的网页中也是如此。如果我点击重新发送邀请,那个人就会收到。我的 QA 团队人员必须一直来找我重新发送邀请。我知道
默认情况下,Hyperledger Fabric 在将许多证书保存到区 block 链之前将其存储在交易中。无论如何或任何想法/技术来最小化区 block 链中的交易大小? 任何想法都非常有用! 最佳
我是 Hyperledger Fabric 的新手。我正在阅读 Fabric 的文档最新版本,但我不清楚 Fabric 的共识。 Fabric 使用的共识是什么?它是如何工作的?请解释。 最佳答案 我
我是 Hyperledger Fabric 的新手,我正在尝试在本地向服务器注册 Fabric 客户端。这是我到目前为止所做的。 go get -u github.com/hyperledger/fa
Hyperledger Fabric 中链和状态数据库的主要区别是什么。我很困惑它们是否相同。 最佳答案 Hyperledger Fabric 中有两个“存储”数据的地方: 账本 状态数据库 账本是真
我尝试将图像上传到分类帐中(将图像转换为 base64 字符串并将其作为交易中的 arg 传递)。 当我发送大小为 30 kb 的图像时,它工作正常,但是对于 100 kb 的图像,我的交易失败了,指
我正在尝试在初始化 Fabric CA 服务器后注册管理员: fabric-ca-server init -b “admin:adminpw” 并启动 CA 服务器: fabric-ca-serve
我正在使用来自 super 账本fabric firstsample的cryptogen工具,它未在 crypto-config/peerorganisation/org1.example.com/m
我离开了一家公司,用于访问 Fabric 的电子邮件已被删除。 现在我在同一家公司工作,他们用相同的句柄重新创建了电子邮件。我不知道这是否是问题所在,但我没有收到任何包含报告的电子邮件,也没有收到 B
如果我有 1 个组织 orgA ,在这个组织下我有 2 个用户:user1和 user2 , 在 orgA 中也有 1 个对等点,让我们称之为 peer0 . 现在想象一下,user1的证书在orgA
全部, 据我所知,在 Hyperledger Fabric 环境中,orderer 将消息传递给 peer。如果有离线对等。恢复到 ON-LINE 时,消息如何传递给对端? orderer如何知道pe
我是一名优秀的程序员,十分优秀!