обрезка изображения на холсте

Question

У меня есть холст размером от 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>

Answer 1

Не минус 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);