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;

所以我将应用很多变换，比如绘制一些线条，裁剪，缩放等... 如何将其应用于多个文件（超过200个）一次（完成这些转换后）？

显然，它将在多个函数中完成，如旋转函数，绘制线等。

感谢您的帮助。

Answer 1

进行转换，路径图和＆amp;将图像绘制成一个带有参数的函数，该函数告诉函数如何处理每个图像：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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（或者您正在做的事情）。

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

2 个答案: