如何在多個圖像

Question

我玩canvas在HTML5和Javascript申請帆布改造和我有一個問題：

我想申請的當前圖像的多個圖像上使用的轉換。

我做了什麼：

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var img = new Image(); 
img.onload = function() { 
    //transformation stuff like: 
    canvas.height = img.height; 
    canvas.width = img.width; 
    ctx.drawImage(img, -img.width/2, -img.height/2, img.width, img.height); 
    ctx.beginPath(); 
    ctx.lineTo(42, 42); 
    ctx.stroke(); 
    ctx.lineTo(42, 24); 
    ctx.stroke(); 
    ... 
    ctx.rotate(Math.PI/2); 
    ... 
}; 
img.src = //base64Img; 

所以我會申請很多喜歡變換的畫一些線條，裁剪，zoomIn等等 我如何應用此將多個文件（超過200）一次（當這些轉換完成時）？

顯然，這將在倍數函數來完成類似的功能旋轉，畫線等

謝謝您的幫助。

Answer 1

把你的轉變，路徑圖紙&描繪成一個帶有參數的函數，告訴函數如何每個圖像將被視爲：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png"; 
 
function start(){ 
 

 
    // Note: img coordinates are [centerX,centerY] rather than the usual [left,top] 
 
    drawTransformedImage(img,25,50,0,.75); 
 
    drawTransformedImage(img,75,50,Math.PI*1/6,1); 
 
    drawTransformedImage(img,150,50,Math.PI*2/6,2); 
 
    drawTransformedImage(img,225,50,Math.PI*3/6,1); 
 
    drawTransformedImage(img,275,50,Math.PI*4/6,.5); 
 

 
} 
 

 
function drawTransformedImage(img,cx,cy,radAngle,scale){ 
 
    // save incoming styling 
 
    var lw=ctx.lineWidth; 
 
    var ss=ctx.strokeStyle; 
 
    // cache often used half-sizes 
 
    var iwHalf=img.width/2; 
 
    var ihHalf=img.height/2; 
 
    ctx.lineWidth=2; 
 
    // do the specified transformations 
 
    ctx.translate(cx,cy); 
 
    ctx.rotate(radAngle); 
 
    ctx.scale(scale,scale); 
 
    // draw the image 
 
    ctx.drawImage(img,-iwHalf,-ihHalf); 
 
    // stroke some paths 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-iwHalf,ihHalf); 
 
    ctx.lineTo(-iwHalf,-ihHalf); 
 
    ctx.strokeStyle='orange'; 
 
    ctx.stroke(); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-iwHalf,-ihHalf); 
 
    ctx.lineTo(+iwHalf,-ihHalf); 
 
    ctx.strokeStyle='blue'; 
 
    ctx.stroke(); 
 
    // clean up: reset transformations and stylings 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    ctx.lineWidth=lw; 
 
    ctx.strokeStyle=ss; 
 
}

body{ background-color: white; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=150></canvas>

Answer 2

轉化的圖片

您的示例未顯示正在轉換的圖像，使您的問題不清楚。

變換獨立於圖像的，它是用於轉化像素座標繪製到畫布上。它不影響圖像。您可以設置變換，然後繪製200個圖像，並且將它們的內容呈現到畫布時，它們都將應用相同的變換。

代碼示例

轉換圖像，你必須創建一個畫布，設置的轉換，然後渲染圖像到該畫布上。畫布現在是轉換後的圖像。

轉換圖像的示例。

var mirrorImage = function (image, vertical, horizontal) { 
    var imageResult, ctx, vF, hF, posX, posY; 

    // create new canvas 
    imageResult = document.createElement("canvas"); 

    // set the pixels size to match the image 
    imageResult.width = image.width; 
    imageResult.height = image.height; 

    // create a drawable surface 
    ctx = imageResult.getContext("2d"); 

    // create the mirror transformation 
    hF = horizontal ? -1, 0; 
    vF = vertical ? -1 : 0; 
    posX = horizontal ? image.width, 0; 
    posY = vertical ? image.height : 0; 

    // Apply the transform to the new image 
    ctx.setTransform(hF, 0, 0, vF, posX, posY); 

    // transform the original image by drawing it onto the new 
    ctx.drawImage(image, 0, 0); 

    // return the new image. 
    return imageResult; 
} 

// create image 
var img = new Image(); 
img.src = "ship.png"; 
// when loaded transform the image 
img.onload = function() { 
    img = mirrorImage(img, true, true); 
    // the image has been transformed. 
} 

要做到這一點，以200圖像，你必須調用mirrorImage（或你在做什麼）爲每個圖像。