Fix jupyter screenshot for complex pictures

Author: martenrichter

src/ui/blackboard/jupyterhublet.jsx

@@ -635,6 +635,7 @@ export class JupyterHublet extends Component {
       move: React.createRef()
     }
     this.jupyteredit = React.createRef()
+    this.jupytereditembedding = React.createRef()
     this.jupyterinfo = React.createRef()
     this.kernelStatusRef = React.createRef()
     this.moveid = {}
@@ -797,9 +798,21 @@ export class JupyterHublet extends Component {
     if (!this.props.screenShotSaver) return
     if (!this.props.addPicture) return
     try {
+      // we need to calculate our own dpi, as the dimensions on the pdf
+      // do not match the dimensions in the pdf
+
+      // calculate desired width
+      const dwidth =
+        400 /* dpi */ *
+        210 /* mm */ *
+        0.0393701 /* inch/ mm */ *
+        this.props.pos.width
+
+      const scaleratio = dwidth / this.appletwidth
+      const dpi = 96 * scaleratio
       const { sha } = await this.props.screenShotSaver(
         await this.jupyteredit.current?.screenShot?.({
-          dpi: 300
+          dpi
         })
       )
       if (!sha) {
@@ -1284,6 +1297,7 @@ export class JupyterHublet extends Component {
                 width: '100%',
                 height: '100%'
               }}
+              ref={this.jupytereditembedding}
             >
               <JupyterEdit
                 editActivated={this.state.jupyteredit}

src/ui/failsboard.jsx

@@ -410,7 +410,28 @@ export class FailsBoard extends FailsBasis {
   }
 
   async screenShotSaver({ data, type }) {
-    const picture = new Blob([data], { type })
+    let picture = new Blob([data], { type })
+    if (picture.size > 950_000) {
+      // there is a 1 mbyte limit for message sizes, compress differently if necessary
+      // first attempt switch to jpeg
+      const origImage = await createImageBitmap(picture)
+      const canvas = new OffscreenCanvas(origImage.width, origImage.height)
+      const ctx = canvas.getContext('2d')
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(origImage, 0, 0)
+      const qualities = [0.95, 0.9, 0.8, 0.7, 0.6, 0.5]
+      for (const quality of qualities) {
+        picture = await canvas.convertToBlob({
+          type: 'image/jpeg',
+          quality
+        })
+        if (picture.size < 950_000) break
+      }
+      if (picture.size > 950_000) {
+        throw new Error('Picture size of screenshot exceeds limit')
+      }
+    }
 
     if (!this.reduce) {
       const pica = Pica({ features: ['js', 'wasm', 'cib'] })