Flutter has a way to convert any widget to an image by boundary?.toImage(). But it doesn't work on the flutter web HTML version. So I am using a JS library html2canvas to take snapshots of widget.
This is the js function used on the native side.
async function captureImageHtmlCanvas(x, y, width, height, scale) {
// Get The canvas
try {
var canvas = await html2canvas(document.body, {
x: x,
y: y,
width: width,
height: height,
scale: scale || 1
});
return canvas.toDataURL("image/jpg", 1);
} catch (e) {
return reject(e);
}
}
It was working in flutter 2, But after flutter 3.0 updated it's not working anymore, Flutter's custom ClipPath is getting avoided if child has any image.
<img src="https://github.com/shofizone/widget_to_image_flutter_web_html/blob/master/Screenshot%202022-12-01%20at%208.52.13%20AM.png?raw=true" alt="drawing" width="300"/>
here is full code in git repository.
https://github.com/shofizone/widget_to_image_flutter_web_html
- Clone the repo
- Run
flutter run -d Chrome --web-renderer html - Try to capture an image with save FAB.
Expected results: Expected result Image should be captured as it looks on the UI. It should be available on the bottom of the heart shape.
Actual results: Image gets captured properly but the custom shape is missing in the captured image.
I didn't find any other way to make it work in HTML version. While I don't want to use the canvasKit version because it is heavy in size and the web app becomes slow when it loads too many images. This issue is breaking out on the production site.
