Comments (9)
I mentioned this before, but minipaint does not take the browser's dpi scaling into account when drawing the canvas. If you use a 4k monitor and change the Windows DPI settings to 200%, for example, minipaint will attempt to draw at 1080p instead of the full 4k of the monitor. This is because the web browser tells the web page that it has a resolution of 1080p, even through for every 1 pixel in CSS it is actually drawing across 4 pixels on the monitor.
To solve this, when creating the display canvas, multiply the canvas resolution by window.devicePixelRatio.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
from minipaint.
Hello,
we already use ctx.imageSmoothingEnabled = true;
for big images when zoomed in.
Other apps probably is resizing images in background and showing that, instead of real scaled image, but it can slow browser based app when working with big images.
But in your cases I see very big difference, original is clear, miniPaint shows blurry image, I suspect something is really wrong here. But first I need you to share original image, your computer OS, browser name and version. Also make sure you compare image with same zoom level. After that we can debug it.
from minipaint.
Hi, thanks for the response.
Original image: https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView2_50cm_8bit_Pansharpened_RGB_DRA_Rome_Italy_2009DEC10_8bits_sub_r_1.jpg
Computer OS: macOS Monterey Version 12.2.1
Browser name: Google Chrome
Browser version: 105.0.5195.125 (latest)
I know the image is very big, but the same quality loss happens with any image in my experience (big, medium or small). And yes images in example above are at the same zoom level. Let me know if there is any other information you need.
from minipaint.
I suspect your browser window (not miniPaint zoom) is zoomed in. You have to keep it at 100% zoom.
from minipaint.
The zoom is normal (100%). I just double checked this.
I also tried Minipaint on a friend's computer and the quality was much better than what I was used to on mine (superior to photopea).
So it seems it is something to do with my device.
from minipaint.
I tested your image in windows PC, it looks sharp and good on miniPaint, no difference between IrfanView and miniPaint on 100% zoom. Something is wrong with canvas rendering on your computer. Try different browser. Or it can be related to macOS,
Maybe yo have scaling enabled on OS level?
Can somebody else test it on macOS?
from minipaint.
So I just plugged my macOS computer into a monitor and the minipaint image quality is great on the monitor. So strange.
I move the minpaint window back to my mac screen and the quality gets worse. Please see the attached screenshots. Exactly the same window - I just move it from my Mac display to the external monitor, without changing anything.
Mac Display:
Monitor display:
from minipaint.
I remember it now, but I can not remember why it was not implemented. I will check if we can do it easily.
from minipaint.
ok, it can be fixed. Image quality can as good as original in any scale. I already have that.
But in that case most of tools and features must be rewritten to also calculate scale changes.
So for now it will not be done, because it would probably require to rewrite all app, and not lots of people are have this issue.
Status: will not fix.
from minipaint.
Related Issues (20)
- Render miniPaint json as image on the server, without frontend HOT 7
- Lock Layer function
- [Feature Request] Add editable charts HOT 1
- Import json with shapes does not work HOT 2
- Icon HOT 11
- ctx.DrawImage() not working HOT 2
- Constraining image dimensions HOT 1
- Dynamic theme switch HOT 1
- Move image and zoom HOT 1
- Can it support images of size in 4-5 GBs? HOT 9
- Can we embed this as a library in an Angular file? HOT 1
- Unable to open an image using URL HOT 1
- Problem in showing Rtl Fonts like 'Fa' & 'Ar' HOT 2
- Problem in showing Rtl Fonts like 'Fa' & 'Ar' HOT 1
- Dear Developer HOT 2
- preload image. HOT 1
- Feature request: Ability to change the image and color of rectangles in the draw editor HOT 2
- Contiguous being glitchy HOT 1
- Make sure effects and other color management is being calculated in linear RGB space. HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from minipaint.