app/javascript/controllers/screenshot.js
import { Controller } from '@hotwired/stimulus';
import * as htmlToImage from 'html-to-image';
export default class extends Controller {
connect() {
this.element.addEventListener(
'turbo:before-fetch-request',
this.prepareScreenshot,
);
}
prepareScreenshot = async (event) => {
event.preventDefault();
if (event.detail.fetchOptions.body instanceof URLSearchParams) {
const data = await htmlToImage.toPng(this.snippetTarget);
event.detail.fetchOptions.body.append('screenshot', data);
}
event.detail.resume();
};
}