Question

我正在从iOS相机拍照，它给了我base64数据。我试图在画布中渲染它，但画布将图像渲染为旋转。

但是如果我在img标签中渲染相同的图像，它的方向是正确的。

这在Android画布上工作正常。问题正在发生在iOS画布上。无论是拍照还是从图书馆中选择，都会出现这个问题。

以下是拍摄照片的代码

const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.PNG,
  mediaType: this.camera.MediaType.PICTURE,
  sourceType: isCamera ? this.camera.PictureSourceType.CAMERA :
    this.camera.PictureSourceType.PHOTOLIBRARY
}



this.camera.getPicture(options).then((imageData) => {
  let base64Image = 'data:image/jpeg;base64,' + imageData;
  this.info.photo.value = base64Image;
}, (err) => {
  // Handle error
});

下面是在画布中绘制的代码

  img = new Image();
  img.src = this.info.photo.value;
  img.onload = function () {
    const height = img.naturalHeight;
    const width = img.naturalWidth;
    const imgWidth = width / height * 200;
    ctx.drawImage(img, (ctx.canvas.width - imgWidth) / 2, font + 20 * pixelRatio, imgWidth, 200);
  }

Answer 1

我通过在CameraOptions

中将correctOrientation选项设为true来更正它

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="table1">
<thead>
    <tr>
        <th class="" id="profilepic">Image</th>
        <th id="empName">Employee</th>
        <th id="00">00:00</th>
        <th id="01">01:00</th>
        <th id="02">02:00</th>
        <th id="03">03:00</th>
        <th id="04">04:00</th>
        <th id="05">05:00</th>
        <th id="06">06:00</th>
        <th id="07">07:00</th>
        <th id="08">08:00</th>
        <th id="09">09:00</th>
        <th id="10">10:00</th>        
    </tr>
</thead>
<tbody id="body1">

</tbody>

在HTML Canvas

1 个答案: