Когда WebView готов к снимку ()?

9

В JavaFX DOCS состояние , что WebViewготова , когда Worker.State.SUCCEEDEDбудет достигнуто , однако, если вы будете ждать некоторое время (то есть Animation, Transition, PauseTransitionи т.д.), пустая страница отображается.

Это говорит о том, что внутри WebView происходит событие, готовящее его к записи, но что это?

На GitHubSwingFXUtils.fromFXImage есть более 7000 фрагментов кода, которые используют, но большинство из них, по-видимому, либо не связаны, либо WebViewинтерактивны (человек маскирует состояние гонки), либо используют произвольные переходы (где-то от 100 мс до 2000 мс).

Я пробовал:

  • Прослушивание changed(...)изнутри WebViewизмерений ( DoublePropertyреализуются свойства высоты и ширины ObservableValue, которые могут отслеживать эти вещи)

    • VНе жизнеспособно. Иногда кажется, что значение меняется отдельно от процедуры рисования, что приводит к частичному содержанию.

  • Слепо рассказывать все и вся в runLater(...)теме приложений FX.

    • TechniquesМногие методы используют это, но мои собственные модульные тесты (а также некоторые отличные отзывы от других разработчиков) объясняют, что события часто уже находятся в нужном потоке, и этот вызов избыточен. Лучшее, что я могу придумать, - это добавить лишь достаточную задержку в очереди, чтобы она работала для некоторых.

  • Добавление прослушивателя / триггера DOM или прослушивателя / триггера JavaScript к WebView

    • JavaScriptОдно JavaScript и DOM загружаются должным образом при SUCCEEDEDвызове, несмотря на пустой захват. Слушатели DOM / JavaScript, похоже, не помогают.

  • Использование Animationили Transitionдля эффективного "сна", не блокируя основной поток FX.

    • Approach Этот подход работает, и, если задержка достаточно велика, может дать до 100% модульных тестов, но время перехода, похоже, будет неким будущим моментом, о котором мы только догадываемся, и плохим дизайном. Для высокопроизводительных или критически важных приложений это вынуждает программиста находить компромисс между скоростью и надежностью, которые потенциально могут быть плохими для пользователя.

Когда хорошее время для звонка WebView.snapshot(...)?

Применение:

SnapshotRaceCondition.initialize();
BufferedImage bufferedImage = SnapshotRaceCondition.capture("<html style='background-color: red;'><h1>TEST</h1></html>");
/**
 * Notes:
 * - The color is to observe the otherwise non-obvious cropping that occurs
 *   with some techniques, such as `setPrefWidth`, `autosize`, etc.
 * - Call this function in a loop and then display/write `BufferedImage` to
 *   to see strange behavior on subsequent calls.
 * - Recommended, modify `<h1>TEST</h1` with a counter to see content from
 *   previous captures render much later.
 */

Фрагмент кода:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.Scene;
import javafx.scene.SnapshotParameters;
import javafx.scene.image.WritableImage;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.atomic.AtomicBoolean;
import java.util.concurrent.atomic.AtomicReference;
import java.util.logging.Logger;

public class SnapshotRaceCondition extends Application  {
    private static final Logger log = Logger.getLogger(SnapshotRaceCondition.class.getName());

    // self reference
    private static SnapshotRaceCondition instance = null;

    // concurrent-safe containers for flags/exceptions/image data
    private static AtomicBoolean started  = new AtomicBoolean(false);
    private static AtomicBoolean finished  = new AtomicBoolean(true);
    private static AtomicReference<Throwable> thrown = new AtomicReference<>(null);
    private static AtomicReference<BufferedImage> capture = new AtomicReference<>(null);

    // main javafx objects
    private static WebView webView = null;
    private static Stage stage = null;

    // frequency for checking fx is started
    private static final int STARTUP_TIMEOUT= 10; // seconds
    private static final int STARTUP_SLEEP_INTERVAL = 250; // millis

    // frequency for checking capture has occured 
    private static final int CAPTURE_SLEEP_INTERVAL = 10; // millis

    /** Called by JavaFX thread */
    public SnapshotRaceCondition() {
        instance = this;
    }

    /** Starts JavaFX thread if not already running */
    public static synchronized void initialize() throws IOException {
        if (instance == null) {
            new Thread(() -> Application.launch(SnapshotRaceCondition.class)).start();
        }

        for(int i = 0; i < (STARTUP_TIMEOUT * 1000); i += STARTUP_SLEEP_INTERVAL) {
            if (started.get()) { break; }

            log.fine("Waiting for JavaFX...");
            try { Thread.sleep(STARTUP_SLEEP_INTERVAL); } catch(Exception ignore) {}
        }

        if (!started.get()) {
            throw new IOException("JavaFX did not start");
        }
    }


    @Override
    public void start(Stage primaryStage) {
        started.set(true);
        log.fine("Started JavaFX, creating WebView...");
        stage = primaryStage;
        primaryStage.setScene(new Scene(webView = new WebView()));

        // Add listener for SUCCEEDED
        Worker<Void> worker = webView.getEngine().getLoadWorker();
        worker.stateProperty().addListener(stateListener);

        // Prevents JavaFX from shutting down when hiding window, useful for calling capture(...) in succession
        Platform.setImplicitExit(false);
    }

    /** Listens for a SUCCEEDED state to activate image capture **/
    private static ChangeListener<Worker.State> stateListener = (ov, oldState, newState) -> {
        if (newState == Worker.State.SUCCEEDED) {
            WritableImage snapshot = webView.snapshot(new SnapshotParameters(), null);

            capture.set(SwingFXUtils.fromFXImage(snapshot, null));
            finished.set(true);
            stage.hide();
        }
    };

    /** Listen for failures **/
    private static ChangeListener<Throwable> exceptListener = new ChangeListener<Throwable>() {
        @Override
        public void changed(ObservableValue<? extends Throwable> obs, Throwable oldExc, Throwable newExc) {
            if (newExc != null) { thrown.set(newExc); }
        }
    };

    /** Loads the specified HTML, triggering stateListener above **/
    public static synchronized BufferedImage capture(final String html) throws Throwable {
        capture.set(null);
        thrown.set(null);
        finished.set(false);

        // run these actions on the JavaFX thread
        Platform.runLater(new Thread(() -> {
            try {
                webView.getEngine().loadContent(html, "text/html");
                stage.show(); // JDK-8087569: will not capture without showing stage
                stage.toBack();
            }
            catch(Throwable t) {
                thrown.set(t);
            }
        }));

        // wait for capture to complete by monitoring our own finished flag
        while(!finished.get() && thrown.get() == null) {
            log.fine("Waiting on capture...");
            try {
                Thread.sleep(CAPTURE_SLEEP_INTERVAL);
            }
            catch(InterruptedException e) {
                log.warning(e.getLocalizedMessage());
            }
        }

        if (thrown.get() != null) {
            throw thrown.get();
        }

        return capture.get();
    }
}

Связанные с:

java multithreading javafx race-condition tresf
источник
Platform.runLater не является избыточным. Могут быть ожидающие события, которые необходимы WebView для завершения его рендеринга. Platform.runLater - это первое, что я бы попробовал.
VGR
Гонка, а также юнит-тесты показывают, что события не ожидаются, а происходят в отдельном потоке. Platform.runLaterбыл проверен и не исправляет это. Пожалуйста, попробуйте сами, если вы не согласны. Я был бы рад ошибаться, это закрыло бы проблему.
tresf
Кроме того, официальные документы ставят SUCCEEDEDсостояние (из которого слушатель запускает поток FX) является надлежащей техникой. Если есть способ показать события в очереди, я был бы рад попробовать. Я нашел редкие предложения в комментариях на форумах Oracle и некоторых SO-вопросах, которые WebViewдолжны разрабатываться в своей собственной ветке, поэтому после нескольких дней тестирования я сосредоточился на них. Если это предположение неверно, отлично. Я открыт для любых разумных предложений, которые решат проблему без произвольного времени ожидания.
tresf
Я написал собственный очень короткий тест и смог успешно получить снимок WebView в прослушивателе состояния загрузчика. Но ваша программа дает мне пустую страницу. Я все еще пытаюсь понять разницу.
VGR
Похоже, это происходит только при использовании loadContentметода или при загрузке файла URL.
VGR

Ответы:

1

Кажется, это ошибка, которая возникает при использовании loadContentметодов WebEngine . Это также происходит при использовании loadдля загрузки локального файла, но в этом случае вызов reload () компенсирует это.

Кроме того, поскольку сценарий должен отображаться при создании снимка, необходимо позвонить show()перед загрузкой содержимого. Поскольку контент загружается асинхронно, вполне возможно, что он будет загружен до оператора, следующего за вызовом loadили после его loadContentзавершения.

Обходной путь заключается в том, чтобы поместить содержимое в файл и вызвать метод WebEngine reload()ровно один раз. Во второй раз, когда содержимое загружается, снимок может быть успешно получен из прослушивателя свойства состояния загрузчика.

Обычно это было бы легко:

Path htmlFile = Files.createTempFile("snapshot-", ".html");
Files.writeString(htmlFile, html);

WebEngine engine = myWebView.getEngine();
engine.getLoadWorker().stateProperty().addListener(
    new ChangeListener<Worker.State>() {
        private boolean reloaded;

        @Override
        public void changed(ObservableValue<? extends Worker.State> obs,
                            Worker.State oldState,
                            Worker.State newState) {
            if (reloaded) {
                Image image = myWebView.snapshot(null, null);
                doStuffWithImage(image);

                try {
                    Files.delete(htmlFile);
                } catch (IOException e) {
                    log.log(Level.WARN, "Couldn't delete " + htmlFile, e);
                }
            } else {
                reloaded = true;
                engine.reload();
            }
        }
    });


engine.load(htmlFile.toUri().toString());

Но поскольку вы используете staticдля всего, вам придется добавить несколько полей:

private static boolean reloaded;
private static volatile Path htmlFile;

И вы можете использовать их здесь:

/** Listens for a SUCCEEDED state to activate image capture **/
private static ChangeListener<Worker.State> stateListener = (ov, oldState, newState) -> {
    if (newState == Worker.State.SUCCEEDED) {
        if (reloaded) {
            WritableImage snapshot = webView.snapshot(new SnapshotParameters(), null);

            capture.set(SwingFXUtils.fromFXImage(snapshot, null));
            finished.set(true);
            stage.hide();

            try {
                Files.delete(htmlFile);
            } catch (IOException e) {
                log.log(Level.WARN, "Couldn't delete " + htmlFile, e);
            }
        } else {
            reloaded = true;
            webView.getEngine().reload();
        }
    }
};

И тогда вам придется сбрасывать его каждый раз, когда вы загружаете контент:

Path htmlFile = Files.createTempFile("snapshot-", ".html");
Files.writeString(htmlFile, html);

Platform.runLater(new Thread(() -> {
    try {
        reloaded = false;
        stage.show(); // JDK-8087569: will not capture without showing stage
        stage.toBack();
        webView.getEngine().load(htmlFile);
    }
    catch(Throwable t) {
        thrown.set(t);
    }
}));

Обратите внимание, что существуют лучшие способы выполнения многопоточной обработки. Вместо использования атомарных классов, вы можете просто использовать volatileполя:

private static volatile boolean started;
private static volatile boolean finished = true;
private static volatile Throwable thrown;
private static volatile BufferedImage capture;

(логические поля по умолчанию имеют значение false, а объектные поля по умолчанию равны нулю. В отличие от программ на C, это жесткая гарантия, предоставляемая Java; не существует такой вещи, как неинициализированная память.)

Вместо того, чтобы опрашивать в цикле изменения, сделанные в другом потоке, лучше использовать синхронизацию, блокировку или класс более высокого уровня, например CountDownLatch, который использует эти вещи внутренне:

private static final CountDownLatch initialized = new CountDownLatch(1);
private static volatile CountDownLatch finished;
private static volatile BufferedImage capture;
private static volatile Throwable thrown;
private static boolean reloaded;

private static volatile Path htmlFile;

// main javafx objects
private static WebView webView = null;
private static Stage stage = null;

private static ChangeListener<Worker.State> stateListener = (ov, oldState, newState) -> {
    if (newState == Worker.State.SUCCEEDED) {
        if (reloaded) {
            WritableImage snapshot = webView.snapshot(null, null);
            capture = SwingFXUtils.fromFXImage(snapshot, null);
            finished.countDown();
            stage.hide();

            try {
                Files.delete(htmlFile);
            } catch (IOException e) {
                log.log(Level.WARNING, "Could not delete " + htmlFile, e);
            }
        } else {
            reloaded = true;
            webView.getEngine().reload();
        }
    }
};

@Override
public void start(Stage primaryStage) {
    log.fine("Started JavaFX, creating WebView...");
    stage = primaryStage;
    primaryStage.setScene(new Scene(webView = new WebView()));

    Worker<Void> worker = webView.getEngine().getLoadWorker();
    worker.stateProperty().addListener(stateListener);

    webView.getEngine().setOnError(e -> {
        thrown = e.getException();
    });

    // Prevents JavaFX from shutting down when hiding window, useful for calling capture(...) in succession
    Platform.setImplicitExit(false);

    initialized.countDown();
}

public static BufferedImage capture(String html)
throws InterruptedException,
       IOException {

    htmlFile = Files.createTempFile("snapshot-", ".html");
    Files.writeString(htmlFile, html);

    if (initialized.getCount() > 0) {
        new Thread(() -> Application.launch(SnapshotRaceCondition2.class)).start();
        initialized.await();
    }

    finished = new CountDownLatch(1);
    thrown = null;

    Platform.runLater(() -> {
        reloaded = false;
        stage.show(); // JDK-8087569: will not capture without showing stage
        stage.toBack();
        webView.getEngine().load(htmlFile.toUri().toString());
    });

    finished.await();

    if (thrown != null) {
        throw new IOException(thrown);
    }

    return capture;
}

reloaded не объявляется как volatile, так как доступ к нему осуществляется только в потоке приложения JavaFX.

VGR
источник
1
Это очень хорошая запись, особенно улучшения кода, связанные с потоками и volatileпеременными. К сожалению, звонок WebEngine.reload()и ожидание последующего SUCCEEDEDне работает. Если я помещаю счетчик в контент HTML, я получаю: 0, 0, 1, 3, 3, 5вместо того 0, 1, 2, 3, 4, 5, чтобы предположить, что он на самом деле не исправляет основное состояние гонки.
tresf
Цитата: «лучше использовать [...] CountDownLatch». Upvoting, потому что эту информацию было нелегко найти, и она помогает ускорить и упростить код при первом запуске FX.
tresf
0

Чтобы приспособиться к изменению размера, а также к базовому поведению снимка, я (мы) разработали следующее рабочее решение. Обратите внимание, что эти тесты были проведены в 2000 раз (Windows, macOS и Linux), обеспечивая случайные размеры WebView с 100% успехом.

Сначала я процитирую одного из разработчиков JavaFX. Это цитата из частного (спонсируемого) сообщения об ошибке:

«Я предполагаю, что вы инициируете изменение размера в FX AppThread, и это происходит после достижения состояния SUCCEEDED. В этом случае мне кажется, что в этот момент ожидание 2 импульсов (без блокировки FX AppThread) должно дать Реализации webkit достаточно времени, чтобы внести свои изменения, если только это не приведет к изменению некоторых измерений в JavaFX, что может снова привести к изменению измерений внутри webkit.

Я думаю о том, как вставить эту информацию в обсуждение в JBS, но я почти уверен, что ответ будет таким: «Вы должны делать снимок только тогда, когда веб-компонент стабилен». Таким образом, чтобы предвидеть этот ответ, было бы хорошо увидеть, работает ли этот подход для вас. Или, если окажется, что это вызывает другие проблемы, было бы хорошо подумать об этих проблемах и посмотреть, можно ли / как их исправить в самом OpenJFX ».

  1. По умолчанию JavaFX 8 использует значение по умолчанию, 600если высота точно 0. Повторное WebViewиспользование кода следует использовать setMinHeight(1), setPrefHeight(1)чтобы избежать этой проблемы. Этого нет в приведенном ниже коде, но стоит упомянуть любого, кто адаптирует его к своему проекту.
  2. Чтобы обеспечить готовность WebKit, подождите ровно два импульса из таймера анимации.
  3. Чтобы предотвратить ошибку пустого снимка, используйте обратный вызов снимка, который также прослушивает импульс.
// without this runlater, the first capture is missed and all following captures are offset
Platform.runLater(new Runnable() {
    public void run() {
        // start a new animation timer which waits for exactly two pulses
        new AnimationTimer() {
            int frames = 0;

            @Override
            public void handle(long l) {
                // capture at exactly two frames
                if (++frames == 2) {
                    System.out.println("Attempting image capture");
                    webView.snapshot(new Callback<SnapshotResult,Void>() {
                        @Override
                        public Void call(SnapshotResult snapshotResult) {
                            capture.set(SwingFXUtils.fromFXImage(snapshotResult.getImage(), null));
                            unlatch();
                            return null;
                        }
                    }, null, null);

                    //stop timer after snapshot
                    stop();
                }
            }
        }.start();
    }
});
tresf
источник