supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3592 from thelounge/xpaw/fix-image-blur

Browse Source 
Round down image transform in image viewer to fix blurry images
This commit is contained in:
Pavel Djundik 2019-12-15 19:10:00 +02:00 committed by GitHub
commit dc93bc0f1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/components/ImageViewer.vue
View File

@ -45,10 +45,15 @@ export default {
}, },
computed: { computed: {
computeImageStyles() { computeImageStyles() {
// Sub pixels may cause the image to blur in certain browsers
// round it down to prevent that
const transformX = Math.floor(this.transform.x);
const transformY = Math.floor(this.transform.y);
return { return {
left: `${this.position.x}px`, left: `${this.position.x}px`,
top: `${this.position.y}px`, top: `${this.position.y}px`,
transform: `translate3d(${this.transform.x}px, ${this.transform.y}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`, transform: `translate3d(${transformX}px, ${transformY}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`,
}; };
}, },
}, },
@ -87,8 +92,8 @@ export default {
const height = viewer.offsetHeight; const height = viewer.offsetHeight;
const scale = Math.min(1, width / image.width, height / image.height); const scale = Math.min(1, width / image.width, height / image.height);
this.position.x = -image.naturalWidth / 2; this.position.x = Math.floor(-image.naturalWidth / 2);
this.position.y = -image.naturalHeight / 2; this.position.y = Math.floor(-image.naturalHeight / 2);
this.transform.scale = Math.max(scale, 0.1); this.transform.scale = Math.max(scale, 0.1);
this.transform.x = width / 2; this.transform.x = width / 2;
this.transform.y = height / 2; this.transform.y = height / 2;