在画布中裁剪图像

Posted 2023-02-25

【中文标题】在画布中裁剪图像

【英文标题】：cropping a image in a canvas

【发布时间】：2019-06-15 07:27:57

【问题描述】：

我有一个大小为 300 像素到 300 像素的画布，我将一个非常大的图像拖放到上面。所以它需要画布的大小。然后我有一个可调整大小和可移动的正方形，用于裁剪某些区域。因此，使用 jquery 我获取裁剪正方形的宽度和高度以及到剪切点的 x 和 y 距离。但是当我最终裁剪并在第二个画布中显示该区域时，我可以看到裁剪区域与我选择的要裁剪区域不完全相同。

我不想使用 getimagedata 和 putimagedata 命令。我只想使用 drawimage 命令

请帮忙

var x = $("#crop_square").width();
var y = $("#crop_square").height();

var ty = $("#crop_square").offset().top - $("#area_c").offset().top;
var tx = $("#crop_square").offset().left - $("#area_c").offset().left;


var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

ctx2.drawImage(image_src,tx,ty,x, y,0,0,c2.width,c2.height);




 <canvas id ="area_c" style="width:300px;height:300px;border:3px solid black;z-index:1"  ondrop="dropb(event)"  ondragover="myfkb(event)"   >
 </canvas>

 <canvas  id ="area_c2" style="width:300px;height:300px;border:3px solid black;z-index:1"  >

  </canvas>

【问题讨论】：

Crop an image displayed in a Canvas的可能重复

不是。我提到了堆栈溢出问题。它使用 getImagedata 。我不想用那个。我只是想只使用绘制图像命令。另外我的问题是裁剪正方形尺寸与裁剪区域不匹配

尝试使用ctx2.drawImage(image_src,tx,ty,x, y,0,0,c2.width,c2.height);，而不是ctx2.drawImage(c,tx,ty,x, y,0,0,c2.width,c2.height);。

我认为问题是裁剪正方形尺寸与图像不匹配，因为它的压缩大小

很可能offset() 不会返回您所期望的，因为您有 DOM 元素嵌套。您应该创建一个小提琴并展示您的问题。

【参考方案1】：

不要从 tx,ty 中减去 area_c top 和 left 试试这个

var x = $("#crop_square").width();
var y = $("#crop_square").height();

var ty = $("#crop_square").offset().top;
var tx = $("#crop_square").offset().left;


var c =  document.getElementById("area_c");
var c2 =  document.getElementById("area_c2");

var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");

ctx2.drawImage(image_src,tx,ty,x, y,0,0,c2.width,c2.height);

【讨论】：

它不会被绘制出来