public inbox for [email protected]  

help / color / mirror / Atom feed

From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][RM7187] ERD Image png 0 bytes
Date: Wed, 6 Apr 2022 18:01:21 +0530
Message-ID: <CAM9w-_ku2EQJ3zcPBSJZUObkHdOPgM=JZuVWXT=64c-S6iZfTQ@mail.gmail.com> (raw)

Hi Hackers,

Due to the limitations of HTML Canvas, if the image exceeds max
width/height of 32767 then the image becomes empty.
To fix this, I have set the max limit of width and height to 32767. The ERD
diagram will be cut if it exceeds the limit. The ERD tool will also throw
an alert to inform the user in that case.
Please review.

[image: image.png]


-- 
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"


Attachments:

  [image/png] image.png (74.9K, 3-image.png)
  download | view image

  [application/octet-stream] RM7187.patch (1.6K, 4-RM7187.patch)
  download | inline diff:
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
index 2b598d808..8b7d77aee 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
@@ -657,11 +657,24 @@ export default class BodyWidget extends React.Component {
     };
 
     setTimeout(()=>{
+      let width = this.canvasEle.scrollWidth + 10;
+      let height = this.canvasEle.scrollHeight + 10;
+      let isCut = false;
+      /* Canvas limitation - https://html2canvas.hertzen.com/faq */
+      if(width >= 32767){
+        width = 32766;
+        isCut = true;
+      }
+      if(height >= 32767){
+        height = 32766;
+        isCut = true;
+      }
       html2canvas(this.canvasEle, {
-        width: this.canvasEle.scrollWidth + 10,
-        height: this.canvasEle.scrollHeight + 10,
+        width: width,
+        height: height,
         scrollX: 0,
         scrollY: 0,
+        scale: 1,
         useCORS: true,
         allowTaint: true,
         backgroundColor: window.getComputedStyle(this.canvasEle).backgroundColor,
@@ -691,6 +704,10 @@ export default class BodyWidget extends React.Component {
           ele.style.transform = prevTransform;
         });
         this.setLoading(null);
+        if(isCut) {
+          Notify.alert(gettext('Maximum image size limit'),
+            gettext('The downloaded image it cut to maximum limit of 32767 x 32767 pixels. This happens when the ERD dimension size has exceeded the maximum limit.'));
+        }
       });
     }, 1000);
   }

view thread (4+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected]
  Subject: Re: [pgAdmin][RM7187] ERD Image png 0 bytes
  In-Reply-To: <CAM9w-_ku2EQJ3zcPBSJZUObkHdOPgM=JZuVWXT=64c-S6iZfTQ@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox