jquery – 应用css后保存画布/图像

<canvas id="capEdit" width="500" height="333"></canvas>

.flipH { 
    -moz-transform: scale(-1,1); 
    -webkit-transform: scale(-1,1); 
    -o-transform: scale(-1,1); 
    transform: scale(-1,1); 
    filter: 
    FlipH; 
}

$(document).on("click","#applyFlip",function() { // save
        var canvas  = document.getElementById("capEdit");
        var dataUrl = canvas.toDataURL();
        $.ajax({ 
            type: "POST",url: '/ajax/saveFlip.@L_874_3@',dataType: 'text',data: {
                base64data : dataUrl,imgName : imgName
            }
        }); 
    });

解决方法@H_675_23@ @H_404_30@ 这里的问题是,当你使用CSS时,你实际上并没有在视觉上转换图像.您需要实际转换图像的画布上下文.

这是一个很好的解释：http://davidwalsh.name/convert-canvas-image

function convertImageToCanvas(imagE) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image,0);

    return canvas;
}

使用getContext方法在Canvas中绘制图像后,可以应用变换,旋转,翻译,使用canvas方法而不是CSs.如果你用CSS改变它,你只是在浏览器中编辑它的外观,你实际上并没有操纵像素数据.在实际绘制图像之前,您需要执行以下操作：

// translate context to center of canvas
  context.translate(canvas.width / 2,canvas.height / 2);

  // rotate 180 degrees clockwise
  context.rotate(Math.PI);

解释画布如何工作有点超出了这个问题的范围,但是看看Canvas api如何完全改变你的上下文.一旦你在上下文中有了图像,转换上下文应该很容易:)

一旦你的画布图像显示出你想要的样子,你就需要从中获取一个数据URI(新图像)并将其传递给你的saveFlip.@L_874_3@函数.

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}