处理canvas绘制图片模糊问题


Posted in Javascript onMay 11, 2022

问题:canvas绘制图片,图片变模糊

设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px。当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况。
我拿下面一张图片画到canvas上作为例子,看上去应该比较明显的有模糊的感觉。

处理canvas绘制图片模糊问题

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

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

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

要点:两个点

通过上面的一个例子,我们可以将图片放大,然后再绘制进原先大小的canvas中,这样图片的精度受损会比较小

了解canvas的绘制原理(*打星号)

canvas其实就是一张画布,所以如果可以的话,你可以将它放大,可以发现它也是有一个个的像素组成的。

处理canvas绘制图片模糊问题

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

处理canvas绘制图片模糊问题

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

处理canvas绘制图片模糊问题

所以当一张图片被绘制到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;"
    />
    <canvas id="canvas" width="400px" height="400px"></canvas>
    <canvas
      id="canvas2"
      width="800px"
      height="800px"
      style="width: 400px; height: 400px;"
    ></canvas>
  </body>
  <script>
    function init() {
      console.log(1234);
      let canvas = document.getElementById("canvas");
      let img = document.getElementById("img");
      let context = canvas.getContext("2d");
      context.drawImage(img, 0, 0, 400, 400);
 
      let canvas2 = document.getElementById("canvas2");
      let context2 = canvas2.getContext("2d");
      context2.drawImage(img, 0, 0, 800, 800);
    }
    window.onload = init;
  </script>
</html>

为了方便,就都写在一个html中了,图片也是找的网图。左边是未处理,也就是代码中的canvas效果,右边是通过方法2处理后的,也就是canvas2效果,请自行鉴别嗷。

处理canvas绘制图片模糊问题

方法三

可以通过 transform:scale(0.5)的方式对图片进行缩放,再绘制到canvas中

以上就是面试中canvas绘制图片模糊图片问题处理的详细内容!

 

Tags in this post...

Javascript 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
JS 对象介绍
Jan 20 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JavaScript字符串对象
Jan 14 Javascript
js编写简单的计时器功能
Jul 15 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
介绍一下28个JS常用数组方法
May 06 #Javascript
VUE解决跨域问题Access to XMLHttpRequest at
js判断两个数组相等的5种方法
May 06 #Javascript
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
关于vue-router-link选择样式设置
Apr 30 #Vue.js
You might like
php实现无限级分类(递归方法)
2015/08/06 PHP
PHP引用的调用方法分析
2016/04/25 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP多维数组排序array详解
2017/11/21 PHP
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
详解python进行mp3格式判断
2016/12/23 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python实现最短路径的实例方法
2020/07/19 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
优秀的毕业生的自我评价
2013/12/12 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
读书活动总结范文
2014/04/26 职场文书
班级文化建设标语
2014/06/23 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
聘任合同书
2015/09/21 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
python办公自动化之excel的操作
2021/05/23 Python