Ionic framework 来自getBoundingClientRect（）的坐标在Ionic 3应用程序上处于禁用状态

我正在写一个Ionic 3应用程序来拍摄小照片

我正在使用相机预览插件来执行此操作：

然后我使用以下公式得到绿色框的坐标：

<div id="mask" style="width:100%;height:100px;border:10px solid rgb(125, 255, 0);" *ngIf="!picture"> </div>

var box = document.getElementById("mask");
var rect = box.getBoundingClientRect();
console.log("MASK: "+rect.left+" "+rect.top+" "+rect.width+" "+rect.height)

其中x，y，w，h是我从box.getBoundingClientRect（）获得的坐标

正如你所看到的，我不得不引入一个offsetX，offsetY，scaleX，scaleY来调整坐标，因为它不起作用

drawImage（）参数是sx、sy、sw、sh（源框->原始图像的坐标）和x、y、w、h（目标->目标图像的坐标）。我不明白为什么它是关闭的

经过反复试验，我发现以下配置适用于我的iPhone 8：

• 偏移量x=125
• offsetY=48
• scaleX=1.7
• scaleY=1.4

我怀疑Y坐标差与应用程序工具栏有关。我不知道为什么x是关闭的，为什么在源和目标上使用相同的w和h不能保持纵横比

我没有在其他设备上测试，但它肯定会失败，因为偏移量和比例因子会不同

为什么会这样？为什么我需要修正坐标

谢谢你的帮助

您的主要问题可能是没有考虑CSS缩放

我们在drawImage中使用的坐标是相对于图像的自然大小（即，介质的大小，而不是介质的大小）的

---

谢谢！回答得很好。

generateFromImage(img, x, y, w, h, quality: number = 1, callback) {
   var canvas: any = document.createElement("canvas");
   var image = new Image();
   image.src = img;

   image.onload = () => {
     canvas.width = w;
     canvas.height = h;
     var ctx = canvas.getContext("2d");

     ctx.drawImage(image, x+this.offsetX, y+this.offsetY, w*this.scaleX, h*this.scaleY, 0, 0, w, h);

     var dataUrl = canvas.toDataURL('image/jpeg', quality);

     callback(dataUrl)
   }

}

var img_bbox = img.getBoundingClientRect();
// the ratio by which our image has been scaled by CSS
var scale_x = img_bbox.width / img.naturalWidth;
var scale_y = img_bbox.height / img.naturalHeight;

// ...then
ctx.drawImage(img,
  rect.left / scale_x,
  rect.top / scale_y,
  rect.width/ scale_x,
  rect.height / scale_y,
  0,
  0,
  rect.width,
  rect.height
);