让我开始说我是与帆布元素合作的新手。我已经设法获得了与jQuery和html2canvas.js一起渲染的Div,但是我想逆时针旋转90度。
我假设我需要在帆布阶段进行此操作,然后再将其作为png输出,即使下载图像,我也需要将其作为png persistent - 我将如何实现?
这是我目前所拥有的,它正在工作(减去旋转)
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();
}
});
我感谢我能得到的任何帮助,即使这似乎是一个基本问题。这个小提琴基本上是在与我的项目相同的原理上起作用。
您必须创建一个新的画布,然后翻译成中心以将原点移至中心(此处是旋转枢轴的功能),旋转然后绘制图像。
最终从旋转的画布中提取图像。
示例
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>
在Onrendered的末尾添加:
image.style.transform = "rotate(90deg)";
您需要更多的变换变体才能使其正常工作交叉浏览器