使用JS将网页元素保存为图像 [英] Saving element of webpage as an image using JS

问题描述

我知道之前已经提出过这个问题，但所有答案都来自几年前，所以也许有些事情发生了变化。

我发现了这个

I know that the question has been asked before, but all the answers are from a few years ago, so perhaps something changed.

I found this https://github.com/apollolm/phantasm , which seems like exactly what I need. But I'm on OSX and it appears not to be supported.

So, how can I use javascript to save an image of a partulcar portion of a webpage?

解决方案

You can use phantomjs for rendering page and getting its image.

Example for rendering your question:

var page = require('webpage').create();

page.viewportSize = {width: 1600, height: 900};

console.log('opening page');
page.open('http://stackoverflow.com/questions/37570827/saving-element-of-webpage-as-an-image-using-js', function(status) {
    console.log('check status ', status);
    if (status == 'success') {
        console.log('getting rect for part of page which we want to render to file');
        var rect = page.evaluate(function() {
            var questionElement = document.getElementById("question");
            return questionElement.getBoundingClientRect();
        });
        console.log('setting rect ', rect);
        page.clipRect = rect;
        console.log('rendering, check file question.png near your script');
        page.render("question.png");            
    }
    console.log('exiting');
    phantom.exit();
})

run it with phantomjs SCRIPT_FILENAME.js and wait for result:

这篇关于使用JS将网页元素保存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！