那些遇到过的问题

Fabric JS 2.4.1 如何使用clipPath裁剪缩放到1：1比例的图片

Lar*_*son 0 image mask crop scale fabricjs

在调整目标图像的大小后，我一直试图弄清楚在计算蒙版矩形的位置和大小时我做错了什么。

以下是fabric JS的文档：

clipPath :fabric.Object 一个fabricObject，没有描边，用它们的形状定义一个剪切区域。填充为黑色，当对象渲染时使用 clipPath 对象，并且上下文被放置在对象 cacheCanvas 的中心。如果您希望剪辑路径的 0,0 与对象中心对齐，请使用 clipPath.originX/Y 来“居中”类型：fabric.Object 来源：fabric.js，第 12991 行

当图像未调整大小（比例为 1:1 X & Y）时，我的代码运行良好。在名为rescaleMask的代码函数中，我尝试将蒙版定位到零中心 X 和 Y，当我在一张方格纸上手动运行我的数学时，似乎数学是正确的。显然，有一个我不知道的部分导致定位以不同的方式关闭，具体取决于进行裁剪的象限。这里有相当多的代码，但重要的是掩码是动态创建的，而不是硬编码。问题必须出在rescaleMask函数中，因此希望可以忽略其余代码。

我创建了一个带有编号方块的测试图像图，我将通过单击蒙版按钮进行裁剪，使用鼠标左键在其中一个框周围绘制一个矩形，然后单击裁剪按钮。在创建蒙版和裁剪之前调整图像大小时会出现问题。

这是测试图像：

方格纸测试网格 540X540 pt

这是一个 jsfiddle结构用鼠标动态 js 2.4.1 创建 rect 作为修复 #4 发送

<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
Run Code Online (Sandbox Code Playgroud)

JS

var lastSelectedPicture = null;
var isInsertingCropRectangle = false;
var canvas = new fabric.Canvas('c', {
  selection: true,
  preserveObjectStacking: true,
  height: 700,
  width: 800
});

var crop_rect, isDown, origX, origY, mask, target;
var done = false;

var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
  img.selectable = true;
  img.id = 'target';
  img.top = 30;
  img.left = 30;
  canvas.add(img);
});

canvas.on('object:added', function(e) {
  target = null;
  mask = null;
  canvas.forEachObject(function(obj) {
    //alert(obj.get('id'));
    var id = obj.get('id');
    if (id === 'target') {
      target = obj;
     canvas.setActiveObject(obj);
   }
    if (id === 'mask') {
      //alert(done);
      //alert('mask');
      mask = obj;
    }
  });
});

canvas.on('object:modified', function(e) {
  e.target.setCoords();
  canvas.renderAll();
});

//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
  isInsertingCropRectangle = true;
    canvas.discardActiveObject();
    lastSelectedPicture.selectable = false;
    lastSelectedPicture.setCoords();
    lastSelectedPicture.dirty = true;
    canvas.renderAll();
    canvas.discardActiveObject();
    isInsertingCropRectangle = true;
});

//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
  if (target !== null && mask !== null) {
    target.setCoords();
    // Re-scale mask
    mask = rescaleMask(target, mask);
    mask.setCoords();

    // Do the crop
    target.clipPath = mask;

    target.dirty=true;
    canvas.setActiveObject(target);
    canvas.bringToFront(target);
    target.selectable = true;
    canvas.remove(mask);
    canvas.renderAll();
    console.log(target);
  }
});

//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M  I N  T H I S  F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
  mask.scaleX = 1;
  mask.scaleY = 1;
  var targetCenterX = target.width * target.scaleX / 2;
  var targetCenterY = target.height * target.scaleY / 2;
  var maskOverlapX = mask.left - target.left;
  var maskOverlapY = mask.top - target.top;
  var centerBasedX = maskOverlapX - targetCenterX;
  var centerBasedY = maskOverlapY - targetCenterY;

  if( maskOverlapX >= targetCenterX){
    centerBasedX = maskOverlapX - targetCenterX;
  }
  else{
    centerBasedX = -(targetCenterX) + maskOverlapX;
  }

  if( maskOverlapY >= targetCenterY){
    centerBasedY = maskOverlapY - targetCenterY;
  }
  else{
    centerBasedY = -(targetCenterY) + maskOverlapY;
  }

  console.log('targetleft = '+target.left);
  console.log('targettop = '+target.top);
  console.log('targetCenterX = '+targetCenterX);
  console.log('targetCenterY = '+targetCenterY);
  console.log('maskleft = '+mask.left);
  console.log('masktop = '+mask.top);
  console.log('maskOverlapX = '+maskOverlapX);
  console.log('maskOverlapY = '+maskOverlapY);
  console.log('centerBasedX = '+centerBasedX);
  console.log('centerBasedY = '+centerBasedY);

  mask.left = centerBasedX;
  mask.top = centerBasedY;
  mask.originX = 'left';
  mask.originY = 'top';

  mask.setCoords();
  mask.dirty=true;
  canvas.renderAll();



  //var newMask = mask;
  return(mask);
}

canvas.on('mouse:down', function(o) {
  if( isInsertingCropRectangle == true ){
    console.log('mouse down done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    crop_rect = new fabric.Rect({
      left: origX,
      top: origY,
      width: pointer.x - origX,
      height: pointer.y - origY,
      opacity: .3,
      transparentCorners: false,
      selectable: true,
      id: 'mask'
    });
    canvas.add(crop_rect);
    canvas.renderAll();
  }
  else{

  }
});

canvas.on('mouse:move', function(o) {
  if( isInsertingCropRectangle == true ){
    console.log('mouse move done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
      crop_rect.set({
        left: Math.abs(pointer.x)
      });
    }
    if (origY > pointer.y) {
      crop_rect.set({
        top: Math.abs(pointer.y)
      });
    }

    crop_rect.set({
      width: Math.abs(origX - pointer.x)
    });
    crop_rect.set({
      height: Math.abs(origY - pointer.y)
    });


    crop_rect.setCoords();
    canvas.renderAll();
  }
  else{

  }
});

canvas.on('mouse:up', function(o) {
  if( isInsertingCropRectangle == true ){
    console.log('mouse up done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    isDown = false;

    crop_rect.set({
      selectable: true
    });
    done = true;
  }
  else{

  }
});

  canvas.on('selection:created', function(event) {
    console.log("canvas.on('selection:created'");
    selectionChanged(event);
  });

  canvas.on('selection:updated', function(event) {
    console.log("canvas.on('selection:updated'");
    selectionChanged(event);
  });

  function selectionChanged(event){
    console.log("selectionChanged");
    console.log("selectionChanged type = "+event.target.type);
    switch(event.target.type) {
      case 'textbox':
        break;
      case 'image':
        lastSelectedPicture = event.target;
        break;
      case 'rect':
        break;
      case 'group':
        break;
      default:
        break;
    }

  }
Run Code Online (Sandbox Code Playgroud)

Mar*_*rcu 6

您需要考虑掩码的target.scaleX和target.scaleY。

var	lastSelectedPicture = null;
var isInsertingCropRectangle = false;
canvas = new fabric.Canvas('c', {
  selection: true,
  preserveObjectStacking: true,
  height: 700,
  width: 800
});

var crop_rect, isDown, origX, origY, mask, target;
var done = false;

var src = "https://stealth-apsvaw.streamhoster.com/fabric_js_2_4_1_crop_test/graph_paper_540.png";
fabric.Image.fromURL(src, function(img) {
  img.selectable = true;
  img.id = 'target';
  img.top = 30;
  img.left = 30;
  canvas.add(img);
});

canvas.on('object:added', function(e) {
  target = null;
  mask = null;
  canvas.forEachObject(function(obj) {
    //alert(obj.get('id'));
    var id = obj.get('id');
    if (id === 'target') {
      target = obj;
	   canvas.setActiveObject(obj);
   }
    if (id === 'mask') {
      //alert(done);
      //alert('mask');
      mask = obj;
    }
  });
});

canvas.on('object:modified', function(e) {
  e.target.setCoords();
  canvas.renderAll();
});

//////////////////////////////////////////////////////////
// MASK
//////////////////////////////////////////////////////////
document.getElementById("mask").addEventListener("click", function() {
	isInsertingCropRectangle = true;
		canvas.discardActiveObject();
		lastSelectedPicture.selectable = false;
		lastSelectedPicture.setCoords();
		lastSelectedPicture.dirty = true;
		canvas.renderAll();
		canvas.discardActiveObject();
		isInsertingCropRectangle = true;
});

//////////////////////////////////////////////////////////
// CROP
//////////////////////////////////////////////////////////
document.getElementById("crop").addEventListener("click", function() {
  if (target !== null && mask !== null) {
    target.setCoords();
		// Re-scale mask
    mask = rescaleMask(target, mask);
    mask.setCoords();
    
    // Do the crop
    target.clipPath = mask;
    
    target.dirty=true;
    canvas.setActiveObject(target);
    canvas.bringToFront(target);
    target.selectable = true;
    canvas.remove(mask);
    canvas.renderAll();
    console.log(target);
  }
});

//////////////////////////////////////////////////////////
// RE-SCALE MASK FOR CROPPING
// P R O B L E M  I N  T H I S  F U N C T I O N
//////////////////////////////////////////////////////////
function rescaleMask(target, mask){
  mask.scaleX = 1;
  mask.scaleY = 1;

  mask.scaleX/=target.scaleX;
  mask.scaleY/=target.scaleY;
 
  var targetCenterX = target.width * target.scaleX / 2;
	var targetCenterY = target.height * target.scaleY / 2;

  var maskOverlapX = mask.left  - target.left;
  var maskOverlapY = mask.top - target.top;
	var centerBasedX = maskOverlapX - targetCenterX;
	var centerBasedY = maskOverlapY - targetCenterY;

  if( maskOverlapX >= targetCenterX){
  	centerBasedX = (maskOverlapX - targetCenterX)/target.scaleX;
  }
  else{
 
  	centerBasedX = (-(targetCenterX) + maskOverlapX)/target.scaleX;
  }

  if( maskOverlapY >= targetCenterY){
  	centerBasedY = (maskOverlapY - targetCenterY)/target.scaleY;
  }
  else{
  	centerBasedY = (-(targetCenterY) + maskOverlapY)/target.scaleY;
  }
  
 
  
  
  console.log('targetleft = '+target.left);
  console.log('targettop = '+target.top);
  console.log('targetCenterX = '+targetCenterX);
  console.log('targetCenterY = '+targetCenterY);
  console.log('maskleft = '+mask.left);
  console.log('masktop = '+mask.top);
	console.log('maskOverlapX = '+maskOverlapX);
	console.log('maskOverlapY = '+maskOverlapY);
  console.log('centerBasedX = '+centerBasedX);
  console.log('centerBasedY = '+centerBasedY);

  mask.left = centerBasedX;
  mask.top = centerBasedY;
  mask.originX = 'left';
  mask.originY = 'top';
	
  mask.setCoords();
  mask.dirty=true;
  canvas.renderAll();
  
  
  
  //var newMask = mask;
  return(mask);
}

canvas.on('mouse:down', function(o) {
	if( isInsertingCropRectangle == true ){
    console.log('mouse down done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    isDown = true;
    var pointer = canvas.getPointer(o.e);
    origX = pointer.x;
    origY = pointer.y;
    crop_rect = new fabric.Rect({
      left: origX,
      top: origY,
      width: pointer.x - origX,
      height: pointer.y - origY,
      opacity: .3,
      transparentCorners: false,
      selectable: true,
      id: 'mask'
    });
    canvas.add(crop_rect);
    canvas.renderAll();
  }
  else{
  
  }
});

canvas.on('mouse:move', function(o) {
	if( isInsertingCropRectangle == true ){
    console.log('mouse move done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    if (!isDown) return;
    var pointer = canvas.getPointer(o.e);

    if (origX > pointer.x) {
      crop_rect.set({
        left: Math.abs(pointer.x)
      });
    }
    if (origY > pointer.y) {
      crop_rect.set({
        top: Math.abs(pointer.y)
      });
    }

    crop_rect.set({
      width: Math.abs(origX - pointer.x)
    });
    crop_rect.set({
      height: Math.abs(origY - pointer.y)
    });


    crop_rect.setCoords();
    canvas.renderAll();
  }
  else{
  
  }
});

canvas.on('mouse:up', function(o) {
	if( isInsertingCropRectangle == true ){
    console.log('mouse up done = '+done);
    if (done) {
      canvas.renderAll();
      return;
    }
    isDown = false;

    crop_rect.set({
      selectable: true
    });
    done = true;
  }
  else{
  
  }
});

	canvas.on('selection:created', function(event) {
		console.log("canvas.on('selection:created'");
		selectionChanged(event);
	});
	
	canvas.on('selection:updated', function(event) {
		console.log("canvas.on('selection:updated'");
		selectionChanged(event);
	});

	function selectionChanged(event){
		console.log("selectionChanged");
		console.log("selectionChanged type = "+event.target.type);
		switch(event.target.type) {
			case 'textbox':
				break;
			case 'image':
				lastSelectedPicture = event.target;
				break;
			case 'rect':
				break;
			case 'group':
				break;
			default:
				break;
		}
		
	}
Run Code Online (Sandbox Code Playgroud) 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.1/fabric.min.js"></script>
<canvas id="c" width="500" height="500" style="border:1px solid #ccc"></canvas>
<button id="mask">Mask</button>
<button id="crop">Crop</button>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

2942 次

最近记录：

7 年，1 月 前
相关归档
我可以阻止Chrome开发者工具控制台记录图像404错误吗？ 63
在swift3中将图像缩放到更小的尺寸 9
Mobile Firefox完全忽略了Viewport 8
在 Python 中保存 1 位深的二进制图像 8
在jQuery中组合图像旋转和裁剪 6
Chrome将jpg资源解释为文档 5
Java-将文本写入图像,然后写入输出文件 5
Tkinter，将前景图像叠加在具有透明度的背景图像之上 5
如何在Facebook中使用动画？ 4
裁剪圆形对象内的最大正方形 - Matlab 3
难疑归档
如果__name__ =="__ main__":怎么办？ 5545
Bash中的Echo newline打印文字\n 2171
带请求正文的HTTP GET 1896
删除包含特定字符串的文本文件中的行 1670
如何将分离的HEAD与master/origin协调？ 1506
为什么在允许某些Unicode字符的注释中执行Java代码？ 1326
我如何开始使用Node.js 1264
使用pip安装特定的软件包版本 1199
忽略git项目中的任何"bin"目录 1172
为PHP密码保护哈希和盐 1142