fix: Save Art: make it more user-friendly

[panda6151025]

• Bugfix

Needs Design check

• @exezbcz please review

Needs QA check

• @kodadot/qa-guild please review

Context

• Closes Save Art: make it more user-friendly #10199
• Requires deployment <worker/stick/speck>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ahp/collection>

• I've tested PR on mobile

• I've written unit tests 🧪

• I've found edge cases

• Are you at Koda Ecosystem Telegram?

Screenshot 📸

• [] My fix has changed **
  
  ** on UI; a screenshot is best to understand changes for others.

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	75cc6c2
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6646942c65c5f9000843420a
😎 Deploy Preview	https://deploy-preview-10298--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[daiagi]

image from canary:

image from this pr:

Both 119kb, 300pxX300px, same quality

[panda6151025]

Hello,Daiagi, Could you explain about it more detail?

[daiagi]

The issue is about having a quick easy way to download full quality image, without opening the image in full screen.

I have tested your pr and found that the image quality downloaded is the same as it was before.
Therfore, this pr does not solve the issue

[codeclimate]

Code Climate has analyzed commit 75cc6c2 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[panda6151025]

To improve image quality while downloading, especially when using JavaScript, you can consider the following approach:
Use high-resolution images: Make sure you are using a high-resolution image as the source for your download. High-quality images naturally provide better clarity and detail.

Compression Optimization: Compresses images in a way that maintains high quality. This may include using modern image formats such as WebP or efficient compression algorithms to reduce file size without sacrificing visual fidelity.

Dynamic Image Rendering: Dynamically render images at higher quality before downloading. Before starting the download process, leverage HTMLCanvasElement and Context2D API to manipulate and enhance image quality as needed.
So I drew an image on a canvas. We then use the nuxt/image module to compress the image into Webp.
As a result, image size was reduced from 121 kbytes to 30 kbytes and image quality was improved.

[prury]

Now the quality is way worse and a better UI solution was not provided.
Also, we do not welcome chatgptesque comments, closing PR.