Question

我有一个大小为300px至300px的画布，并将非常大的图像拖放到其上。因此它需要画布的大小。然后，我有了一个可调整大小且可移动的正方形，用于裁切某些区域。因此，使用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>

Answer 1

不要减去tx，ty的area_c顶部和左侧试试这个

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);

在画布上裁剪图像

1 个答案: