解决Canvas画图清晰度问题

这篇具有很好参考价值的文章主要介绍了解决Canvas画图清晰度问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近在开发Web端远程桌面的时候遇到的一个问题,解决记录一下,分享给各位有需要用到的朋友。

先吹下水:远程桌面的连接我们是通过Websocket连接后,后端不断返回远程端的界面二进制数据流,我接收到之后转为图像,画到Canvas中,然后对canvas进行一系列的事件监听,传递消息给服务端,从而实现远程桌面的连接操作。

在完成开发之后,发现了一个问题,后端返回的图片信息是比较清晰的,当我在前端渲染的时候,将窗口放在扩展屏上时,图像显示正常,但将窗口移入到电脑屏时就出现了模糊现象。
经查资料,最终找到了这个API:Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。此值也可以解释为像素大小的比率:一个 CSS 像素的大小与一个物理像素的大小。简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

物理像素的大小即是在内存中的实际大小,CSS像素的大小即是设置的样式大小。

将窗口移入扩展屏前后 devicePixelRatio 值的对比:
解决Canvas画图清晰度问题,javascript,canvas
根据上述描述:缩放倍率 = 物理像素 / CSS像素

当我们设置图像在canvas中的实际大小的时候,不要直接将物理像素等于样式像素,而是要设置等于样式像素乘以缩放倍率。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 假设获取到的图片宽是600,高是400
const width = 600, height = 400;
// 设置canvas的样式宽高
canvas.style.width = width + "px";
canvas.style.height = height + "px";

// 设置物理像素,在内存中的实际大小
var scale = window.devicePixelRatio; // 获取缩放倍率
canvas.width = Math.floor(width * scale);
canvas.height = Math.floor(height * scale);

// 绘图
ctx.drawImage('图片信息', 0, 0, canvas.width, canvas.height)

当缩放倍率改变时,例如屏幕大小改变等,我们可以使用监听缩放倍率来实现更新canvas宽高。文章来源地址https://www.toymoban.com/news/detail-810375.html

let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;

const updatePixelRatio = () => {
  let pr = window.devicePixelRatio;
  // 更新业务逻辑代码
};

updatePixelRatio();

matchMedia(mqString).addListener(updatePixelRatio);

到了这里,关于解决Canvas画图清晰度问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebRTC清晰度和流畅度

    WebRTC清晰度和流畅度 flyfish WebRTC提供了4种模式DISABLED,MAINTAIN_FRAMERATE,MAINTAIN_RESOLUTION,BALANCED 接口是 根据源码 接口这里不是一一对应的kDetailed和kText是类似的 使用方法 上述代码video_track创建好之后,调用 参考 https://w3c.github.io/webrtc-pc/#idl-def-rtcdegradationpreference https://crbug.co

    2024年02月10日
    浏览(51)
  • Python之Matplotlib绘图调节清晰度

    引言 使用python中的matplotlib.pyplot绘图的时候,如果将图片显示出来,或者另存为图片,常常会出现清晰度不够的问题,当然这种问题是对于png或者jpg这种格式的图片而言的,如果是生成svg或者pdf则不存在这种问题,但是png和jpg也是经常需要使用的图片格式,因此就需要想办法

    2024年02月01日
    浏览(43)
  • 镜头光学指标介绍----清晰度SFR/MTF

    目录 简介         常用单位 lp/mm(line-pairs/mm) Cycle / pixel LW/PH(line widths/ picture height) 转换关系 MTF MTF概念 MTF50,MTF50P SFR SFR的计算方法 参考资料: 在镜头选型或者对比中,一般都会参考一些镜头的光学指标,产品中也会根据产品需求,选取合适的镜头,一般有清晰度指标

    2024年02月09日
    浏览(40)
  • php图片批量压缩并同时保持清晰度

    php图片压缩可以通过GD库来实现。以下是一个使用GD库进行图片压缩的示例代码:

    2024年02月11日
    浏览(36)
  • 使用ffmpeg实现视频旋转并保持清晰度不变

    通过ffmpeg -i命令查看视频基本信息 通过命令查看,原始视频信息 分辨率为1920x1080,码率19977k, 帧率59.94 -qscale value:使用固定的视频量化标度(VBR),以value质量为基础的VBR,取值0.01-255,越小质量越好 -q:v:表示存储jpeg的图像质量 -b:v:设置输出文件的视频比特率(码率),本

    2024年01月25日
    浏览(43)
  • Python 图像处理教程:如何提高图像细节清晰度

    Python 是一种广泛应用于图像处理的编程语言,它提供了丰富的图像处理库,例如 Pillow 和 OpenCV 等。在进行图像处理时,有时候我们需要提高图像的细节清晰度,以便更好地观察和分析图像。本教程将介绍一些 Python 图像处理技巧,帮助您提高图像细节的清晰度。 增强图像对

    2024年02月11日
    浏览(40)
  • 亿图导出word和PDF中清晰度保留方法

    在亿图软件中画一个元件大小搭配合理的图。注意字体大小的安排,尤其是角标的大小要合适,示范如下 选中所有元器件,右键使用组合功能将电路图组合为一个整体 将亿图软件中的图保存为SVG格式。示范如下 在导出到office中选择SVG文档 在visio中打开上一步保存的SVG文件。

    2024年02月08日
    浏览(60)
  • videojs 实现自定义组件(视频画质/清晰度切换) React

    最近使用videojs作为视频处理第三方库,用来对接m3u8视频类型。这里总结一下自定义组件遇到的问题及实现,目前看了许多文章也不全,官方文档写的也不是很详细,自己摸索了一段时间陆陆续续完成了,这是实现后的效果. 样式啥的自己检查后覆盖就行了,没啥说的,重点看

    2024年02月11日
    浏览(65)
  • paperclub今日分享:一键体验Stable Diffusion 和清晰度修复

    今天分享一下SD和清晰度修复,并在文末附带源代码。 1. Stable Diffusion Stable Diffusion简称SD,是一个文本到图像的潜在扩散模型,说到SD就得提下Diffusion,简单来讲主要利用CLIP语言向量结合UNET的注意力机制生成noise predictor(噪声预测器),然后反推得到结果,这个过程非常耗时

    2024年02月12日
    浏览(55)
  • 为什么视频画质会变差,如何提升视频画质清晰度。

    在数字时代,视频已经成为我们生活中不可或缺的一部分。然而,随着视频的传输和处理过程中的多次压缩,画质损失逐渐凸显,影响了我们对影像的真实感受。为了让视频画质更加清晰、逼真,我们需要采取一些措施来保护和修复视频画质,还原影像的真实之美。 1、录制

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包