如何使用画布90°逆时针旋转从div渲染的.png? [英] How to rotate .png rendered from div with canvas 90° ccw?
问题描述
首先让我说我是使用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();
}
});
即使这似乎是一个基本问题,我也很感谢我能提供的任何帮助. 这个小提琴基本上以与您要查看的项目相同的原理工作.
您必须创建一个新的画布,然后平移到中心以将原点移动到中心(此处用作旋转的枢轴),旋转然后绘制图像. /p>
最后从旋转的画布中提取图像.
示例
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>
Let me start off by saying that I'm new to working with the Canvas element. I've managed to get a div to render as a png with jQuery and html2canvas.js, but I'd like to rotate the png 90 degrees counter-clockwise.
I assume I need to do this in the canvas stage, before the outputting it as a png for it to be persistent even when the image is downloaded – how would I go about and accomplish that?
This is what I've got at the moment, which is working (minus the rotation)
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();
}
});
I appreciate any help I can get, even though this might seem like a basic question. This fiddle basically works on the same principles as my project it you want to take a look.
You would have to create a new canvas, then translate to center to move origin to center (here functions as pivot for rotation), rotate then draw image.
Finally extract image from the rotated canvas.
Example
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>
这篇关于如何使用画布90°逆时针旋转从div渲染的.png?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!