Skip to content

Instantly share code, notes, and snippets.

@cellularmitosis cellularmitosis/README.md

Last active Jun 6, 2020
Embed
What would you like to do?
Preventing image resizing in the draw.io desktop app

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
QlNESUZGNDC4AAAAAAAAAIoAAAAAAAAAgVqbAwAAAABCWmg5MUFZJlNZyM+vOgAAvnf//CkoDTRAiCIAAqBkBABAQBCAACIXMAESAQgCwITBoACSDUmgRiYIyYhowmm01DaG1BJIUNAHqGgaAA9Q0ADTBTT8232xRg+rWCwBOE4UUZ4kWvA6YZz4xek5JJI3VEbAZPSGBQcgBmYYxsnykSZmdAzTd56rzmHEzPfJpnw2Ar6+AIgRMbPPa7IzSpCVlpGFaEFiSRhfk6wURbi7kinChIZGfXnQQlpoOTFBWSZTWTRWDHkBUmRoIfYBwAAIAEAAAAQACqAAcEAAAKUqYmJp6eGxgERX/IiKVmQoiTMhJKRm0hJVA6OD5c8/u9HE8MqgqqTRo9MUFZJlNZjKeAgwAIQMAh8ADAAAAIAAggAFCGAE1UGjyqpVZpKIKd5UIClme5UgCfF3JFOFCQ5AuYcQQlpoOTFBWSZTWYfNzC0AAAgMADAAAgAgADDMBUnqTQ6WujPF3JFOFCQh83MLQA==
@pepasflo

This comment has been minimized.

Copy link

pepasflo commented Apr 3, 2019

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

@onespes

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.