JS画布图像旋转onload

我想在图像加载时在画布上旋转图像，但它没有显示出来，我没有得到任何JavaScript错误。JS画布图像旋转onload

下面的代码：

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(); 
    }

来源

2017-04-01 rckz

绕原点旋转。如果旋转90度，图像将完全绘制在画布外。 Habe在'rotate（）'调用之前使用过'context.translate（canvas.width/2，canvas.height/2）;'还是类似的？这将改变旋转的起源。 –

相关[stackoverflow question]（http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image）。 –

谢谢，伙计！它完全不在画布上。 :) – rckz

-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>

VAR三角洲= 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;

来源

2017-11-29 10:08:18 user8081186

你能格式化你的其他代码吗？ – WhatsThePoint

JS画布图像旋转onload

回答

相关问题