JS画布图像旋转加载

Question

加载图像时，我正在尝试在画布上旋转图像，但它没有显示，并且没有收到javascript错误。

代码如下：

 function drawImage(pictureId, direction, ctx, posX, posY) {
     var image = document.createElement("img");
     //i set the image src here
     image.onload = function () {                
                drawRotated(image, direction, posX, posY);
            } 
        }
    function drawRotated(image, direction, posX, posY) {
            ctx.save();
            ctx.rotate((direction*90)*(Math.PI/180));                            
            ctx.drawImage(image, posX, posY);
            ctx.restore();
     }

Answer 1

<div class="avatar">
    <img class="img-responsive profile-img" ng-if="jc.profile.get('image')" ng-src="{{jc.profile.get('image')}}">
    <img class="img-responsive profile-img" ng-if="!jc.profile.get('image')" src="assets/images/man.png">
</div>

变量增量 = 0

    this.rotateImage = function () {
        if (this.user.get('imageRotation'))
            delta = parseInt(this.user.get('imageRotation'))
        delta += 90
        delta = delta % 360
        document.getElementById("image").style.webkitTransform = "rotate(" + delta + "deg)";
        return delta
    }

this.user = User;
if (this.user.get('imageRotation') && $location.$$path.toString().includes('/user/'))
    onLoadRotateImage(this.user.get('imageRotation'))
// tools
this.tools = User.tools;