HTML Canvas JS-在rotate（）之后删除黑色边框

Question

我正在创建一个表单，用于直接从智能手机上传照片。因此，我必须阅读EXIF参数并旋转图像以获得正确的视图。问题是当我旋转图像时，右侧仍然有一个黑色边框（覆盖旋转之前的先前宽度）。

这是我的代码：

var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(reader.result));
var inizio_x = 0;
var inizio_y= 0;

switch(exif.Orientation){
        case 8:
          ctx.rotate(-90*Math.PI/180);
          inizio_x = -tempW;
          inizio_y = 0;     
        break;

        case 3:
           ctx.rotate(180*Math.PI/180);
           inizio_x = -tempW;
           inizio_y = -tempH;
        break;

        case 6:
           ctx.rotate(90*Math.PI/180);
           inizio_x = 0;
           inizio_y = -tempH;
        break;
    }

ctx.drawImage(this, inizio_x, inizio_y, tempW, tempH);

var dataURL = canvas.toDataURL("image/jpeg");

我已更改画布的原点X＆Y点以适合旋转的图像。

重要：图像永远不会是正方形，所以我不能旋转到中心。

谢谢您的帮助。