2024年C C++最新canvas - 绘制图片，图片变模糊问题解决），2024年最新2024最新大厂高频微服务面试总结

2401_84978559

于 2024-05-13 05:07:47 发布

阅读量312

点赞数 4

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84978559/article/details/138779668

版权

程序员专栏收录该内容

39 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。

那么如何去处理这样的问题呢？

生活中应该大家都遇到过这样的情况，同样的1080p的视频，在大屏显示器上看和手机上看效果是不一样的，大屏往往会让人感觉一种模糊感。而在手机小屏幕上，就会感觉异常的清晰。

要点：两个点

通过上面的一个例子，我们可以将图片放大，然后再绘制进原先大小的canvas中，这样图片的精度受损会比较小
了解canvas的绘制原理（*打星号）
canvas其实就是一张画布，所以如果可以的话，你可以将它放大，可以发现它也是有一个个的像素组成的。

如上图，可以看到一个个的网格。假设我们需要在上面绘制一条1px的线条，就会得到上面的效果。
但是canvas是的绘制方式是从中线开始绘制，并向两侧延伸的。

在这里插入图片描述

他会以图中的红线作为中线，向两边延伸，从而得到1px的纵向线条。但是像素是不允许0.5px的出现的，所以它索性就直接再延伸一点，将像素给填满。所以你看到的效果是下面这种👇

在这里插入图片描述

所以当一张图片被绘制到canvas中的时候，很多区域都会被绘制两次，所以出现重叠导致你看到的图片是模糊的。
其实马赛克的原理也是，相邻像素点之间的颜色进行运算进行交叉覆盖，起到打码的效果。
所以有几种不同的解决方案。

解决方案

方法一

在绘制的时候，如果是线条，可以通过移动0.5px找准中线来达到目的，例如：

ctx.moveTo(100.5,100.5);
ctx.lineTo(200.5,100.5);

方法二

如果是图片，可以通过放大一倍canvas大小，但是通过css保持canvas大小不变，然后再绘制进canvas中，这样在canvas放大一倍的情况下绘制进去图片，然后通过css缩小canvas到原来大小达到目的。

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas绘制图片模糊</title>
  </head>
  <body>
    <img
      id="img"
      src="https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/09/0C/Cg-4WVV6jWmIczjzAAdzu1eYHzwAAFK1wD9poMAB3PT053.jpg"
      width="100px"
      height="100px"
      style="visibility: hidden;"
    />


![img](https://img-blog.csdnimg.cn/img_convert/2131ca296ddcec7330b996ef5173e7f6.png)
![img](https://img-blog.csdnimg.cn/img_convert/b741cc2965273c037aac55fc0e511ed9.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84978559

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2024年C C++最新canvas - 绘制图片，图片变模糊问题解决），2024年最新2024最新大厂高频微服务面试总结

单方面的去修改图片精度，换成更高清的图片，事实证明确实有一丢丢用，但是效果不是很明显。况且我当时那个图片由于是手绘的，大小有5M，也不会切片加载图片，直接整个加载非常耗时。那么如何去处理这样的问题呢？
复制链接

扫一扫