如何在多个图像上应用画布转换

Question

I'm playing with canvas in HTML5 and Javascript and I have a problem:

I'd like to apply transformations used on the current image to multiple images.

What I did:

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;

So I will apply a lot of transformations like draw some lines, crop, zoomIn etc... How can I apply this to multiple files (more than 200) once (when these transformations are done) ?

Obviously, it will be done in multiples functions like a function to rotate, to draw a line etc.

Thank you for your help.

Answer 1

Put your transformations, path drawings & image drawing into a function with arguments that tell the function how each image will be treated:

 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

Transforming an Image

Your example does not show a image being transformed, making your question unclear.

The transform is independent of the image, it is used to transform pixel coordinates drawn onto the canvas. It does not affect the image. You can set the transform and then draw the 200 images and they will all have the same transformation applied when their content is rendered to the canvas.

Code example

To transform the image you must create a canvas, set the transform, then render the image onto that canvas. The canvas is now the transformed image.

An example of transforming an image.

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

To do that to 200 images you have to call mirrorImage (or what ever you are doing) for each image.