在新窗口中打印画布

Question

我有一个窗口说window1，我有一个画布，我把它转换成像这样的图像

var can = document.getElementById('canvas');
var img = new Image();
img.src = can.toDataURL();

但是我在这之间转动那张图像

var img = new Image();
img.style.webkitTransformOrigin= "left bottom";
img.id = "printable";
img.style.webkitTransform = "translateY(-100%) rotate(90deg)";
img.src = can.toDataURL();

现在我在新窗口中打开它

var myWindow = window.open("", "", "width=347.7200,height=755.9100");
myWindow.document.body.appendChild(img);

问题是

1.在新窗口打开后旋转图像，即图像进入新窗口，然后应用css然后旋转。 （我希望它旋转然后转到新窗口，我该怎么做？）

或

2.如果我尝试打印它，旋转前图像的宽度和高度仍然存在。我想只打印图像而不是全身。 请参阅存在的滚动条，如果我使用html主体上的额外空格打印出来的图像的纸张大小。

Answer 1

使用CSS变换时，元素大小和位置仍然是DOM最初定义的位置，它的only the rendering会受到变换的影响。

因此，如果一个元素被定义为例如600x300，那么它仍将处于原始位置及其占据的大小，即使它被渲染在不同的位置，大小，比例，旋转等。这就是为什么你看到滚动条反映原始大小和方向。

要使用画布解决此问题，您可以进行绝对旋转，以便提取的图像代表实际的目标大小和方向。这种方法也消除了为每个浏览器使用正确前缀的需要。

为此，请定义具有交换宽度和高度的新画布：

// note: assumes the width and height of source canvas is already set

var print = document.createElement("canvas");

// notice we swap height/width assuming 90° rotation
print.width = canvas.height;
print.height = canvas.width;

现在定义上下文的变换而不是元素：

var ctx = print.getContext("2d");
ctx.translate(print.width>>1, print.height>>1);        // center origin
ctx.rotate(Math.PI/2);                                 // rotate 90°
ctx.drawImage(canvas, -canvas.width, -canvas.height);  // draw around origin

（如果您愿意，可以在拐角处旋转。）

从此处提取图像并插入新页面。

＆＃13;

＆＃13;

var ctx = canvas.getContext("2d");
ctx.font = "110px sans-serif";
ctx.fillText("TEST", 10, 110);

var print = document.createElement("canvas");

// notice we swap height/width assuming 90° rotation
print.width = canvas.height;
print.height = canvas.width;

ctx = print.getContext("2d");
ctx.translate(print.width>>1, print.height>>1);
ctx.rotate(Math.PI/2);
ctx.drawImage(canvas, -canvas.width>>1, -canvas.height>>1);

// extract as image, here shown in DOM
var img = new Image();
img.src = print.toDataURL();
img.onload = function() {
  // when this is called, we're ready to print.
};
document.body.appendChild(img);

＆＃13;

canvas {border:1px solid #555}

＆＃13;

<canvas id=canvas></canvas><br>

＆＃13;

＆＃13;

＆＃13;

您可能还想将此CSS添加到新窗口：

body {margin:0;overflow:hidden}

提示：没有理由在图像元素上设置ID，因为您已经引用了它（img）。

Answer 2

我猜你需要改变画布＆＃39;在绘制图像之前的上下文如下：

var imgURL = "http://lorempixel.com/200/200/sports",
    img = new Image();

img.addEventListener('load', function (e) {
  var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d');

 canvas.width = e.target.height;
 canvas.height = e.target.width;

 context.translate(e.target.width,0);
 context.rotate(Math.PI/2);
 context.drawImage(e.target, 0, 0);

 document.body.appendChild(canvas);
});

img.src = imgURL;

fiddle

Answer 3

如果我理解正确，你想在新窗口中渲染画布。所以我修改了你的代码以满足要求。

下面的代码在新窗口中绘制一个简单的行：

var img = new Image(), 
    can=document.createElement('canvas');

var ctx=can.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();


img.style.webkitTransformOrigin= "left bottom";
img.id = "printable";
img.style.webkitTransform = "translateY(-100%) rotate(90deg)";
img.src = can.toDataURL();
var myWindow = window.open("", "", "width=347.7200,height=755.9100");
myWindow.document.body.appendChild(img);

链接：https://jsfiddle.net/Ashokkumargupta/7xaokpzz/3/

注意：请允许弹出:)

希望这有帮助！

此致

阿肖克