关于canvas绘制图像模糊问题
前段时间在做项目的裁剪并上传图像功能的时候,发现裁剪后展示的图像比较模糊,之后去百度上搜索了一下,看到有一个解决方案是设置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");
关于canvas绘制图像模糊问题的更多相关文章
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
- Canvas绘制图形
1.Canvas绘制一个蓝色的矩形 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
- [canvas]利用canvas绘制自适应的折线图
前段时间学习了用canvas绘制折现图,且当画布变换大小,折现图会随之变化,现附上代码 <!DOCTYPE html> <html lang="en"> & ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
随机推荐
- Nginx反向代理与负载均衡应用实践(一)
Nginx反向代理与负载均衡应用实践(一) 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App ...
- 【学术篇】NOI2015 品酒大会 后缀数组+并查集
省选前大致是刷不了几道题了... 所以就找一些裸一点的题目练练板子算了= = 然而这题一点都不裸, 也并不怎么好写... 于是就浪费了将近一下午的时间... 然而还不是因为后缀数组板子不熟= = 首先 ...
- mongoose 常用数据库操作 插入
项目 db.js var mongoose = require('mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/whhhh', { u ...
- 友善之臂arm9、 smart210监控版本,烧写系统
第一次接触嵌入式开发,就拿210练手了,第一天折腾,先烧系统. 准备:板子,8GB或者以上的SD卡,网上找下minitools以及系统小红帽,Android或者ubuntu,debian都可以.[ub ...
- Boost Download
{ //https://www.boost.org/users/history/version_1_71_0.html }
- Delphi 堆栈 [ heap(堆) 和 stack(栈) ]
程序需要的内存空间分为 heap(堆) 和 stack(栈); heap(堆) 是自由存储区, stack(栈) 是自动存储区; 使用 heap 需要手动申请.手动释放, 使用 stack 是自动申请 ...
- PHP FILTER_SANITIZE_NUMBER_INT 过滤器
定义和用法 FILTER_SANITIZE_NUMBER_INT 过滤器删除数字中所有非法的字符. 该过滤器允许所有数字以及 . + - Name: "number_int" ID ...
- java中获取类加载路径和项目根路径的5种方式分析
package my; import Java.io.File; import java.io.IOException; import java.net.URL; public class MyUrl ...
- Http请求工具类 httputil
package com.snowfigure.kits.net; import java.io.BufferedReader; import java.io.IOException; import j ...
- docker集群故障迁移
docker swarm 故障时候镜像迁移(无法添加新节点的时候)生产docker集群出现了故障,无法正常添加删除节点.在这样的情况下只能想办法把故障集群的镜像迁移到新的docker集群当中.将发生故 ...