Skip to content

Instantly share code, notes, and snippets.

@cellularmitosis

cellularmitosis/README.md

Last active December 1, 2020 13:10
Show Gist options
  • Save cellularmitosis/e5e7d1517939b98418a58cdd8595dd8c to your computer and use it in GitHub Desktop.
Save cellularmitosis/e5e7d1517939b98418a58cdd8595dd8c to your computer and use it in GitHub Desktop.
Download ZIP
Preventing image resizing in the draw.io desktop app
Raw
README.md

Blog 2019/4/3

<- previous | index | next ->

Preventing image downscaling in the draw.io desktop app

By default, the draw.io app will shrink any image larger than 520 pixels wide. This is a problem when creating diagrams which need larger, pixel-perfect images.

If press the Control key after starting to drag an image, draw.io will sometimes prompt if you'd like to resize or use the original image resolution:

Screen Shot 2019-04-03 at 5 09 56 PM

The problem with this is:

  • It doesn't consistently present the dialog (sometimes it just shrinks the image anyway)
  • The "Remember this setting" appears to be completely broken
  • Having to hold Control every time to drag in a new image is a pain in the ass!

The easiest way to defeat this "feature" is to use the desktop version of the draw.io app and patch the javascript to disable this behavior.

Download the latest version of the app here: https://github.com/jgraph/drawio-desktop/releases/

Note: because OS X verifies the integrity of applications upon first run, you need to run the app at least once before patching it, otherwise OS X will refuse to run the app:

Screen Shot 2019-04-03 at 4 54 35 PM

Method 1: edit app.asar by hand

The file to edit is /Applications/draw.io.app/Contents/Resources/app.asar

In this file will be several copies of EditorUI.js, some of which are minified.

We want to change these constants:

Screen Shot 2019-04-03 at 5 26 03 PM

Edit those constants to be a very large number:

Screen Shot 2019-04-03 at 5 25 28 PM

Be sure to also edit all instances of those constants in the sections of minified js as well:

Screen Shot 2019-04-03 at 5 28 40 PM

(Note: I initially tried to edit app.asar using VS Code, but it ended up blowing up the file by ~6MB (perhaps due to reformatting the minified JS blocks?). I instead edited the file using vim and all was well).

Method 2: change app.asar using a binary patch file

Rather than editing app.asar by hand, you can instead us the binary patch I've attached to this gist.

  • brew install bsdiff
  • cat app.asar.bsdiff.base64 | base64 --decode > app.asar.bsdiff
  • bspatch app.asar app.asar.new app.asar.bsdiff
  • mv app.asar.new app.asar
Raw
app.asar.bsdiff.base64
QlNESUZGNDC4AAAAAAAAAIoAAAAAAAAAgVqbAwAAAABCWmg5MUFZJlNZyM+vOgAAvnf//CkoDTRAiCIAAqBkBABAQBCAACIXMAESAQgCwITBoACSDUmgRiYIyYhowmm01DaG1BJIUNAHqGgaAA9Q0ADTBTT8232xRg+rWCwBOE4UUZ4kWvA6YZz4xek5JJI3VEbAZPSGBQcgBmYYxsnykSZmdAzTd56rzmHEzPfJpnw2Ar6+AIgRMbPPa7IzSpCVlpGFaEFiSRhfk6wURbi7kinChIZGfXnQQlpoOTFBWSZTWTRWDHkBUmRoIfYBwAAIAEAAAAQACqAAcEAAAKUqYmJp6eGxgERX/IiKVmQoiTMhJKRm0hJVA6OD5c8/u9HE8MqgqqTRo9MUFZJlNZjKeAgwAIQMAh8ADAAAAIAAggAFCGAE1UGjyqpVZpKIKd5UIClme5UgCfF3JFOFCQ5AuYcQQlpoOTFBWSZTWYfNzC0AAAgMADAAAgAgADDMBUnqTQ6WujPF3JFOFCQh83MLQA==
@pepasflo
Copy link

pepasflo commented Apr 3, 2019

Hmm, in some cases it looks like it is still downscaling images anyway. Oh fiddle-sticks!

@onespes
Copy link

onespes commented Jun 6, 2020

I haven't tried doing these yet. I tried to insert some PNG images and in some instances it would resize the image no matter what.
So far, the only trick that worked for me was to use the site Tiny PNG and it would work without any issues, though it would be nice if it worked without to having to resort to Tiny PNG site.

@JimiSweden
Copy link

thanks Jason for pointing me to a solution on Windows - added to this gist. https://gist.github.com/JimiSweden/329242731d07da2303826a6983f9e345

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment