首先我要说的是,我是使用 Canvas 元素的新手。我已经设法使用 jQuery 和 html2canvas.js 将 div 渲染为 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.
最佳答案
您必须创建一个新 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>
关于javascript - 如何使用 Canvas 将 div 渲染的 .png 逆时针旋转 90°?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37963855/