एक स्नैपशॉट के लिए एक WebView कब तैयार है ()?


9

JavaFX डॉक्स राज्य है कि एक WebViewके लिए तैयार है जब Worker.State.SUCCEEDEDतक पहुँच जाता है फिर भी, जब तक आप थोड़ी देर के (यानी इंतजार Animation, Transition, PauseTransition, आदि), एक रिक्त पृष्ठ प्रदान की गई है।

इससे पता चलता है कि वेबव्यू के अंदर एक ऐसी घटना होती है जो इसे पकड़ने के लिए तैयार करती है, लेकिन यह क्या है?

नहीं है GitHub पर 7000 से अधिक कोड के टुकड़े जो उपयोगSwingFXUtils.fromFXImage लेकिन उनमें से ज्यादातर या तो से संबंधित नहीं होना दिखाई WebView, इंटरैक्टिव (मानव मास्क रेस स्थिति) कर रहे हैं या मनमाने ढंग संक्रमण (कहीं भी 100ms से 2,000ms करने के लिए) का उपयोग करें।

मैंने कोशिश की:

  • पर सुनकर changed(...)भीतर से WebViewकी आयाम (ऊंचाई और चौड़ाई गुण DoublePropertyलागू करता ObservableValueहै, जो इन बातों की निगरानी कर सकते हैं)

    • 🚫नहीं व्यवहार्य। कभी-कभी, मूल्य पेंट की दिनचर्या से अलग होने लगता है, जिससे आंशिक सामग्री बनती है।
  • स्पष्ट रूप runLater(...)से एफएक्स एप्लीकेशन थ्रेड पर कुछ भी और सब कुछ बता रहा है ।

    • TestsMany तकनीकें इसका उपयोग करती हैं, लेकिन मेरी अपनी इकाई परीक्षण (साथ ही अन्य डेवलपर्स से कुछ महान प्रतिक्रिया) समझाते हैं कि घटनाएं अक्सर पहले से ही सही धागे पर होती हैं, और यह कॉल निरर्थक है। सबसे अच्छा मैं सोच सकता हूं कि कतार के माध्यम से देरी के लिए पर्याप्त है कि यह कुछ के लिए काम करता है।
  • DOM श्रोता / ट्रिगर या जावास्क्रिप्ट श्रोता / से जोड़ना WebView

    • SUCCEEDEDखाली कैप्चर के बावजूद कॉल करने पर जावास्क्रिप्ट और DOM को ठीक से लोड किया गया लगता है । DOM / जावास्क्रिप्ट श्रोताओं की मदद के लिए नहीं लगता है।
  • मुख्य एफएक्स थ्रेड को अवरुद्ध किए बिना एक Animationया Transitionप्रभावी रूप से "नींद" का उपयोग करना ।

    • , यह दृष्टिकोण काम करता है और यदि विलंब काफी लंबा है, तो 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();
    }
}

सम्बंधित:


Platform.runLater बेमानी नहीं है। लंबित घटनाएँ हो सकती हैं जो WebView के लिए इसके प्रतिपादन को पूरा करने के लिए आवश्यक हैं। Platform.runLater पहली बात है जो मैं कोशिश करूँगा।
वीजीआर

दौड़ के साथ-साथ इकाई परीक्षणों से पता चलता है कि घटनाएं लंबित नहीं हैं, बल्कि एक अलग धागे में होती हैं। Platform.runLaterपरीक्षण किया गया था और इसे ठीक नहीं करता है। यदि आप असहमत हैं तो कृपया इसे अपने लिए आज़माएँ। मुझे गलत होने में खुशी होगी, यह समस्या को बंद कर देगा।
tresf

इसके अलावा, आधिकारिक डॉक्स अवस्था को SUCCEEDED(जिनमें से एफएक्स थ्रेड पर श्रोता आग लगाते हैं) उचित तकनीक है। यदि कतारबद्ध घटनाओं को दिखाने का कोई तरीका है, तो मैं कोशिश करूँगा। मुझे ओरेकल मंचों पर टिप्पणियों और कुछ एसओ प्रश्नों के माध्यम से विरल सुझाव मिले हैं WebViewजो डिजाइन द्वारा अपने स्वयं के धागे में चलना चाहिए, इसलिए परीक्षण के दिनों के बाद मैं वहां ऊर्जा केंद्रित कर रहा हूं। यदि वह धारणा गलत है, तो महान। मैं किसी भी उचित सुझाव के लिए खुला हूं जो बिना किसी प्रतीक्षा समय के समस्या को ठीक करता है।
tresf

मैंने अपना बहुत छोटा परीक्षण लिखा था, और लोड वर्कर के राज्य श्रोता में सफलतापूर्वक एक WebView का स्नैपशॉट प्राप्त करने में सक्षम था। लेकिन आपका कार्यक्रम मुझे एक खाली पृष्ठ देता है। मैं अभी भी अंतर समझने की कोशिश कर रहा हूं।
वीजीआर

ऐसा प्रतीत होता है कि यह केवल एक loadContentविधि का उपयोग करते समय या फ़ाइल URL लोड करते समय होता है ।
वीजीआर

जवाबों:


1

ऐसा लगता है कि यह एक बग है जो WebEngine के loadContentतरीकों का उपयोग करते समय होता है । यह loadकिसी स्थानीय फ़ाइल को लोड करने के लिए उपयोग करते समय भी होता है , लेकिन उस स्थिति में, पुनः लोड करना () कॉल करना इसकी भरपाई करेगा।

इसके अलावा, जब आपको स्नैपशॉट लेते समय स्टेज दिखाने की आवश्यकता होती है, तो आपको show()सामग्री लोड करने से पहले कॉल करना होगा । चूंकि सामग्री अतुल्यकालिक रूप से भरी हुई है, इसलिए यह पूरी तरह से संभव है कि कॉल loadया loadContentखत्म होने के बाद बयान से पहले इसे लोड किया जाएगा ।

उसके बाद, वर्कअराउंड को सामग्री को एक फ़ाइल में रखना है, और reload()ठीक एक बार WebEngine की विधि को कॉल करना है । दूसरी बार सामग्री लोड होने पर, लोड वर्कर की राज्य संपत्ति के श्रोता से एक स्नैपशॉट सफलतापूर्वक लिया जा सकता है।

आम तौर पर, यह आसान होगा:

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;

(बूलियन फ़ील्ड डिफ़ॉल्ट रूप से गलत होते हैं, और ऑब्जेक्ट फ़ील्ड डिफ़ॉल्ट रूप से शून्य होते हैं। सी कार्यक्रमों के विपरीत, यह जावा द्वारा बनाई गई एक कठिन है; इसमें असमान स्मृति जैसी कोई चीज नहीं है।)

दूसरे धागे में किए गए परिवर्तनों के लिए एक लूप में मतदान करने के बजाय, सिंक्रनाइज़ेशन, लॉक या काउंटडाउनचैच जैसे उच्च स्तर के वर्ग का उपयोग करना बेहतर होता है जो आंतरिक रूप से उन चीजों का उपयोग करता है:

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 इसे अस्थिर घोषित नहीं किया जाता है क्योंकि यह केवल JavaFX एप्लिकेशन थ्रेड में ही एक्सेस किया जाता है।


1
यह एक बहुत अच्छा लेखन है, खासकर थ्रेडिंग और volatileवेरिएबल्स के आसपास के कोड में सुधार । दुर्भाग्य से, कॉलिंग WebEngine.reload()और थोड़ी देर के लिए इंतजार करना SUCCEEDEDकाम नहीं करता है। यदि मैं HTML सामग्री में एक काउंटर रखता हूं, तो मुझे प्राप्त होता है: 0, 0, 1, 3, 3, 5इसके बजाय 0, 1, 2, 3, 4, 5, यह सुझाव देते हुए कि यह वास्तव में अंतर्निहित दौड़ की स्थिति को ठीक नहीं करता है।
tresf

उद्धरण: "उपयोग करने के लिए बेहतर [...] CountDownLatch"। अपवोटिंग क्योंकि यह जानकारी ढूंढना आसान नहीं था और यह प्रारंभिक FX स्टार्ट-अप के साथ कोड की गति और सरलता में मदद करता है।
tresf

0

रीसाइज़िंग के साथ-साथ अंतर्निहित स्नैपशॉट व्यवहार को समायोजित करने के लिए, मैं (हम) निम्नलिखित कार्य समाधान के साथ आया हूं। ध्यान दें, ये परीक्षण 100% सफलता के साथ यादृच्छिक WebView आकार प्रदान करने वाले 2,000x (विंडोज, मैकओएस और लिनक्स) चलाए गए थे।

सबसे पहले, मैं JavaFX देवों में से एक को उद्धृत करूँगा। यह एक निजी (प्रायोजित) बग रिपोर्ट से उद्धृत किया गया है:

"मुझे लगता है कि आप FX AppTread पर रीसाइज़िंग शुरू करते हैं, और यह कि SUCCEED अवस्था में पहुंचने के बाद किया जाता है। उस स्थिति में, मुझे ऐसा लगता है कि उस समय, 2 दालों का इंतज़ार करना (FX Apphhread को ब्लॉक किए बिना) देना चाहिए। वेबकिट को अपने परिवर्तनों को लागू करने के लिए पर्याप्त समय मिलता है, जब तक कि यह कुछ आयाम जावाएफ़एक्स में परिवर्तित नहीं होता है, जिसके परिणामस्वरूप वेबकिट में परिवर्तित होने वाले आयामों में फिर से परिणाम हो सकते हैं।

मैं सोच रहा हूं कि इस जानकारी को जेबीएस में चर्चा में कैसे शामिल किया जाए, लेकिन मुझे पूरा यकीन है कि इसका जवाब होगा कि "आपको केवल एक स्नैपशॉट लेना चाहिए जब वेबकंपनी स्थिर हो"। इसलिए इस उत्तर का अनुमान लगाने के लिए, यह देखना अच्छा होगा कि क्या यह दृष्टिकोण आपके लिए काम करता है। या, अगर यह अन्य समस्याओं का कारण बनता है, तो इन समस्याओं के बारे में सोचना अच्छा होगा, और देखें कि क्या / कैसे उन्हें ओपन जेएफएक्स में तय किया जा सकता है। "

  1. डिफ़ॉल्ट रूप से, JavaFX 8 डिफ़ॉल्ट का उपयोग करता है 600यदि ऊंचाई बिल्कुल है 0। कोड reusing 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();
    }
});
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.