在木偶操纵者的被转动的观点

时间:2017-12-08 12:10:42

标签: google-chrome-devtools puppeteer google-chrome-headless

我正在尝试使用puppeteer(无头Chrome)模仿旋转的视口。我的意思是我希望将输出旋转一定量(通常为90度)。

我目前使用的代码是:

python
from kivy.app            import App
from kivy.lang           import Builder
from kivy.uix.scrollview import ScrollView
from kivy.properties     import ObjectProperty

class Scroll_A(ScrollView):
    scroll_b = ObjectProperty(None)
    def on_scroll_move(self, touch):
        self.scroll_b.scroll_y = self.scroll_y

class Scroll_B(ScrollView):
    def on_scroll_move(self, touch):
        pass

Mykv = '''
GridLayout:
    cols: 2
    spacing: 100, 100
    padding: 50, 50, 50, 50
    Scroll_A:
        id: scroll_a
        scroll_b: scroll_b
        do_scroll_y: True
        pos_hint: {'top': 1}
        Label:
            size_hint_y: None
            text_size: self.width, None
            color: 1,1,1,1
            height: self.texture_size[1]
            text: 'X' * 1000
    Scroll_B:
        id: scroll_b
        do_scroll_y: True
        pos_hint: {'top': 1}
        Label:
            size_hint_y: None
            text_size: self.width, None
            color: 1,1,1,1
            height: self.texture_size[1]
            text: 'Y' * 1000
'''

class MyApp(App):

    def build(self):
        return Builder.load_string(Mykv)

if __name__ == '__main__':
    MyApp().run()

生成的屏幕截图是:

enter image description here

但我希望它是这样生成的:

enter image description here

是的,可以使用另一个库来旋转木偶操纵者的输出,但是有没有办法在木偶操纵者中本地执行此操作,以避免必须单独旋转?

如果失败了,在发送到const puppeteer = require('puppeteer'); var myExpressRoute = function (req, res, next) { (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); page.setViewport({width: 500, height: 350}); await page.goto('https://example.com'); var screenshotBuffer = await page.screenshot(); res.header('Content-Type', 'image/png'); res.send(screenshotBuffer); await browser.close(); })(); }; (不需要保存到图像文件并旋转图像文件)之前,通过旋转操作传递screenshotBuffer的最佳工具是什么?

1 个答案:

答案 0 :(得分:2)

在拍摄屏幕快照之前,可以结合使用rotate() CSS函数和page.evaluate()来旋转屏幕:

原始屏幕截图:

/**
 * Original Screenshot
 */

await page.setViewport({
  width: 500,
  height: 350,
});

await page.screenshot({
  path: 'original-screenshot.png',
});

旋转的屏幕截图:

/**
 * Rotated Screenshot
 */

await page.setViewport({
  width: 350,
  height: 500,
});

await page.evaluate(() => {
  document.body.style.transform = 'rotate(-90deg)';
});

await page.screenshot({
  path: 'rotated-screenshot.png',
});