关于canvas绘制图像模糊问题
2024-10-07 18:32:21
前段时间在做项目的裁剪并上传图像功能的时候,发现裁剪后展示的图像比较模糊,之后去百度上搜索了一下,看到有一个解决方案是设置canvas的宽高为css宽高的3倍,使用后感觉效果很好,当时就没管原理接着做功能去了。
在昨天,我想试试做一个鼠标划入图片,图片已鼠标为中心,部分区域放大的demo(类似淘宝商品展示页面的那种)。在制作过程中,我又遇到了canvas转图片模糊的问题,因为当时在解决上个的问题的时候使用了谷歌搜索问题,便又用谷歌搜索了一下(当时忘了刚解决过同样的问题),发现出现这个问题的的原因在于当前显示设备的物理分辨率与CSS分辨率不同,这两个分辨率的比值可在JS中使用window.devicePixelRatio获取,该属性返回一个当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。在获取这个属性的值后,对canvas的宽高进行对应的缩放就可以得到不会模糊的图片啦。
这是示例代码:
// img为用于展示canvas绘图结果的img元素
const img = document.querySelector('#img');
// 创建canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d'); const width = 400;
const height = 800;
// 设置canvas的css宽高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`; // 获取缩放比
const ratio = window.devicePixelRatio || 1;
// 设置canvas的宽高
canvas.width = width * ratio;
canvas.height = height * ratio;
... // 在canvas中绘图 img.src = canvas.toDataURL("image/png");
最新文章
- [WPF系列]-数据邦定之DataTemplate简介
- 1089 最长回文子串 V2(Manacher算法)
- 几个常用的CV知识点
- 【一套C语言控制台的输出框代码】
- 移动web中一些问题处理与事件说明
- PHP 汉字转拼音
- 矩形的个数-nyoj206
- Windows中检测当前是否有窗口全屏
- Android 动态添加删除ExpandableListView的item的例子
- JavaScript 跨域:window.postMessage 实现跨域通信
- 用PYTHON硬写SOCKET
- javascript学习代码--点击按钮显示内容
- 微软HoloLens技术解谜
- 外显子分析:cutadapt,去除序列adapter详细解析
- iOS speex
- ThinkJS框架入门详细教程(一)开发环境
- 大数据hadoop面试题2018年最新版(美团)
- Docker 基础技术之 Linux namespace 源码分析
- C语言一个双向链表的实现
- 十二、文件和目录——Linux文件系统结构
热门文章
- Docker 部署 nginx 前端项目
- 关于计算机学习的书(doc,mobi,epub,pdf四种格式)
- php高版本安装ecshop错误解决方法
- C判断语句
- 冲刺$\mathfrak{CSP-S}$集训模拟赛总结
- error LNK2019: 无法解析的外部符号 __imp__GetStockObject@4该符号在函数_WinMain@16 中被引用
- Dubbo入门到精通学习笔记(九):简易版支付系统介绍、部署(单节点)
- C++——数据结构之链表
- 剑指offer——43数据流中的中位数
- Jackson环境安装设置