javascript - FabricJS 裁剪扩展功能
问题描述
找到了这种裁剪的实现 https://editphotosforfree.com/photoapps/online-photo-editor-and-collage-maker 这正是我想要使用的。但是看起来互联网上没有复制此功能的示例。堆栈溢出和谷歌搜索中的其他裁剪技术具有此实现的一些原则,但不是全部。任何想法如何实现这一目标?
Update1:通过一些调试,我可以传输代码。但它并不完美。角落离开边界,如果您旋转图像,它将不起作用。也许有人可以在此基础上“构建”。
document.getElementById("crop").onclick = function () {
var e = canvas.getActiveObject();
if (e && e.get("type") == "image") {
var i = new fabric.Rect({
id: "crop-rect",
top: e.top,
left: e.left,
width: e.getScaledWidth(),
height: e.getScaledHeight(),
stroke: "rgb(42, 67, 101)",
strokeWidth: 2,
strokeDashArray: [5, 5],
fill: "rgba(255, 255, 255, 1)",
globalCompositeOperation: "overlay",
}),
a = new fabric.Rect({
id: "overlay-rect",
top: e.top,
left: e.left,
width: e.getScaledWidth(),
height: e.getScaledHeight(),
selectable: !1,
selection: !1,
fill: "rgba(0, 0, 0, 0.5)",
});
if ((i.setControlVisible("mtr", !1), e.cropX)) {
var s = e.cropX,
o = e.cropY,
c = e.width,
l = e.height;
e.set({
cropX: null,
cropY: null,
left: e.left - s * e.scaleX,
top: e.top - o * e.scaleY,
width: e._originalElement.naturalWidth,
height: e._originalElement.naturalHeight,
}),
(e.dirty = !0),
i.set({
left: e.left + s * e.scaleX,
top: e.top + o * e.scaleY,
width: c * e.scaleX,
height: l * e.scaleY,
}),
(i.dirty = !0),
a.set({
left: e.left,
top: e.top,
width: e.width * e.scaleX,
height: e.height * e.scaleY,
}),
(a.dirty = !0);
}
canvas.add(a),
canvas.add(i),
canvas.discardActiveObject(),
canvas.setActiveObject(i),
canvas.renderAll(),
i.on("moving", function () {
(i.top < e.top || i.left < e.left) &&
((i.left = i.left < e.left ? e.left : i.left),
(i.top = i.top < e.top ? e.top : i.top)),
(i.top + i.getScaledHeight() > e.top + e.getScaledHeight() ||
i.left + i.getScaledWidth() > e.left + e.getScaledWidth()) &&
((i.top =
i.top + i.getScaledHeight() > e.top + e.getScaledHeight()
? e.top + e.getScaledHeight() - i.getScaledHeight()
: i.top),
(i.left =
i.left + i.getScaledWidth() > e.left + e.getScaledWidth()
? e.left + e.getScaledWidth() - i.getScaledWidth()
: i.left));
}),
i.on("deselected", function () {
h();
});
}
function h(r, n) {
var s = (i.left - e.left) / e.scaleX,
o = (i.top - e.top) / e.scaleY,
c = (i.width * i.scaleX) / e.scaleX,
l = (i.height * i.scaleY) / e.scaleY;
e.set("cropX", s),
e.set("cropY", o),
e.set("width", c),
e.set("height", l),
canvas.remove(i),
canvas.remove(a),
e.set({
top: e.top + o * e.scaleY,
left: e.left + s * e.scaleX,
});
}
};
解决方案
绝对没有完整的事情,唯一的方法是举个例子,你可以找到并修改它,或者从头开始,这很可悲,但这是真的。诀窍是设置正确的cropX,cropY,图像的高度,宽度,根据背景图像的偏移量,这是初始图像的克隆
推荐阅读
- c# - 不使用 P/Invoke 的 StringBuilder 数组
- java - 使用循环对众多字符串值求和
- python - WTForms DateTimeField 返回 True 无关输入
- python - 在元组中查找整数,它是字典中的键
- python - Pygame - 添加背景图片
- javascript - 在 JavaScript 中复制冻结数组有什么缺点吗?
- regex - 仅匹配文档根目录中所有带有扩展名的文件
- django - 如何在 gitlab-runner 下的 Kubernetes 执行器上启用 postgis?
- ios - Cordova iOS 应用程序使用 phonegap-plugin-push 未注册或请求授权
- excel - 复制粘贴循环基于关闭缩进级别