在HTML5上旋轉90度的圖像Canvas

我無法使用HTML5畫布旋轉圖像。我想我只是算錯了，並希望得到這個權利的任何幫助。在HTML5上旋轉90度的圖像Canvas

在移動設備上，我在150px×558px的畫布上捕獲用戶簽名。我只是試圖創建一個558像素×150像的圖像，這只是捕獲的旋轉90度的簽名。以下是我目前想到的代碼片段。正如你可能猜測的那樣，我並沒有很好地掌握數學這門課。我相信我的程序是正確的，而不是數字。

我試圖做的是： 1）設置畫布中間的中心，我的形象 2）的高度和寬度抵消旋轉90度 3）繪製圖像畫布4）將畫布翻回來。

編輯：這裏有一個的jsfiddle：http://jsfiddle.net/x9FyK/

var $signature = $("#signature"); 
    var signatureData = $signature.jSignature("getData"); 

    console.log(signatureData); 

    var img= new Image(); 
    img.onload = function() { 
     var rotationCanvas = document.createElement('canvas'); 
     rotationCanvas.width = img.height; 
     rotationCanvas.height = img.width; 

     var context = rotationCanvas.getContext("2d"); 
     context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4); 

     context.rotate(Math.PI/2); 
     context.drawImage(img,0,0); 
     context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4)); 
     var rotatedData = rotationCanvas.toDataURL(); 

     ...Handling rotated data here 

    }; 
    img.src = signatureData;

如果我能提供任何詳細資訊，請讓我知道。

預先感謝您的幫助，

來源

2014-04-28 user3582127

您可以發佈的jsfiddle鏈接？ – InferOn

我用小提琴編輯過帖子：http://jsfiddle.net/x9FyK/ – user3582127

There有幾種方法可以將轉換後的（翻譯+旋轉的）畫布重新設置回原始狀態。

低指針的答案是使用context.save將上下文保存爲原始未轉換狀態並使用context.restore將上下文恢復爲繪製完成後的原始狀態。

它以撤消轉換的另一種方式執行它們。

另外，請注意context.translate實際上會將畫布原點移動到畫布中心。由於圖像是從它們的左上角（而不是它們的中心）繪製的，因此如果要將圖像置於畫布中心，則必須將drawImage偏移圖像寬度和高度的一半。

這裏的和例如：http://jsfiddle.net/m1erickson/EQx8V/

// translate to center-canvas 
// the origin [0,0] is now center-canvas 

ctx.translate(canvas.width/2,canvas.height/2); 

// roate the canvas by +90% (==Math.PI/2) 

ctx.rotate(Math.PI/2); 

// draw the signature 
// since images draw from top-left offset the draw by 1/2 width & height 

ctx.drawImage(img,-img.width/2,-img.height/2); 

// un-rotate the canvas by -90% (== -Math.PI/2) 

ctx.rotate(-Math.PI/2); 

// un-translate the canvas back to origin==top-left canvas 

ctx.translate(-canvas.width/2,-canvas.height/2); 

// testing...just draw a rect top-left 

ctx.fillRect(0,0,25,10);

enter image description here

來源

2014-04-28 16:50:11 markE

非常感謝你！ !!!!!!! – user3582127

你認爲如果我們把它放在支票上，它會通過嗎？：-o哦，重置變換的第三種方法是使用setTransform（絕對值）。 – K3N

大聲笑 - 儘可能多的國家債務，我們有檢查可能不明確！並且像往常一樣使用setTransform重置應用轉換是正確的。 – markE

這一定會幫助你>>HTML5 Canvas Rotate Image :)

使用一些SEPARATE js函數繪製你的畫布：

function drawRotated(degrees){ 
    contex_var.clearRect(0,0,canvas.width,canvas.height); 
    contex_var.save(); 
    contex_var(canvas.width/2,canvas.height/2); 
    contex_var.rotate(degrees*Math.PI/180); 
    contex_var.drawImage(image,-image.width/2,-image.width/2); 
    contex_var.restore(); 
      }

就給一些角度任何buttonclick功能：

$("#clockwise").click(function(){ 
    angleInDegrees+=30; 
    drawRotated(angleInDegrees); 
});

來源

2014-04-28 16:24:09

我不知道我明白你的意思。據我所知，請在這裏糾正我，如果我錯了，我使用context.translate和context.rotate – user3582127

看到上面編輯 –

我會給你一個鏡頭，謝謝 – user3582127

在HTML5上旋轉90度的圖像Canvas

回答

相關問題