如何以 canvas 逆时针 90° 旋转从 div 渲染的 .png？

Question

首先让我说我是使用 Canvas 元素的新手。我已经设法让 div 呈现为带有 jQuery 和 html2canvas.js 的 png，但我想将 png 逆时针旋转 90 度。

我假设我需要在 canvas 阶段执行此操作，然后将其输出为 png 以使其持久即使图像已下载 –我将如何着手完成它？

这就是我目前得到的，它正在工作（减去旋转）

html2canvas($("#portrait_back_div"), {
    onrendered: function (canvas) {
        //document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');

        var image = new Image();
        image.src = data;
        document.getElementById('portrait_back_png').appendChild(image);
        //$( "#portrait_back_div" ).hide();
    }
});

我很感激能得到任何帮助，即使这看起来像是一个基本问题。 This fiddle basically works on the same principles as my project it you want to take a look.

Answer 1

在onrendered的末尾添加：

image.style.transform = "rotate(90deg)";

你需要更多的转换变体才能跨浏览器工作

Answer 2

您必须创建一个新的 canvas，然后转换到中心以将原点移动到中心（此处用作旋转的枢轴），然后旋转然后绘制图像。

最后从旋转的 canvas 中提取图像。

例子

html2canvas($("#portrait_back_div"), {
  onrendered: function (canvas) {

    // create intermediate canvas
    var rotCanvas = document.createElement("canvas");

    // swap width and height
    rotCanvas.width = canvas.height;
    rotCanvas.height = canvas.width;

    // get context
    var rctx = rotCanvas.getContext("2d");

    // translate to center (rotation pivot)
    rctx.translate(rotCanvas.width * 0.5, rotCanvas.height * 0.5);

    // rotate -90° (CCW)
    rctx.rotate(-Math.PI * 0.5);

    // draw image offset so center of image is on top of pivot
    rctx.drawImage(canvas, -canvas.width * 0.5, -canvas.height * 0.5);

    // extract image from rotate canvas
    var data = rotCanvas.toDataURL('image/png');

    var image = new Image();
    image.src = data;
    document.getElementById('portrait_back_png').appendChild(image);
    //$( "#portrait_back_div" ).hide();
  }
});

// proof-of-concept example
var img = new Image;
img.onload = function() {
  var rotCanvas = document.createElement("canvas");
  var rctx = rotCanvas.getContext("2d");
  rotCanvas.width = this.height;
  rotCanvas.height = this.width;
  rctx.translate(rotCanvas.width * 0.5, rotCanvas.height * 0.5);
  rctx.rotate(-Math.PI * 0.5);
  rctx.drawImage(this, -this.width * 0.5, -this.height * 0.5);
  document.body.appendChild(this);
  document.body.appendChild(rotCanvas)
};
img.src = "//i.imgur.com/YqeJUhl.jpg?1";

<h4>Original on top, rotated canvas at bottom</h4>

如何以 canvas 逆时针 90° 旋转从 div 渲染的 .png？

How to rotate .png rendered from div with canvas 90° ccw?

javascript

jquery

png

canvas

html2canvas

例子