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

Question

我在HTML5和Javascript使用canvas ，我遇到了一个问题：

我想将当前图像上使用的变换应用于多个图像。

我做了什么：

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;

所以我将应用很多变换，比如绘制一些线条，裁剪，缩放等等......如何将它应用于多个文件（超过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（或者您正在做的事情）。