面试中canvas绘制图片模糊图片问题处理


Posted in Javascript onMarch 13, 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绘制图片模糊图片问题处理的详细内容,更多关于面试canvas绘制图片模糊解决的资料请关注三水点靠木其它相关文章!

 

Tags in this post...

Javascript 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
jquery实现轮播图效果
Feb 13 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 #Javascript
Vue如何清空对象
Mar 03 #Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 #Vue.js
javascript之Object.assign()的痛点分析
Mar 03 #Javascript
vue实现移动端div拖动效果
Mar 03 #Vue.js
vue实现滑动解锁功能
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 #Javascript
You might like
php split汉字
2009/06/05 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python实现倒计时的示例
2014/02/14 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
自荐书模板
2013/12/15 职场文书
党员公开承诺事项
2014/03/25 职场文书
联谊会主持词
2014/03/26 职场文书
主题教育活动总结
2014/05/05 职场文书
书法大赛策划方案
2014/06/04 职场文书
妈妈活动方案
2014/08/15 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
支教个人总结
2015/03/04 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技