处理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 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
js模拟实现烟花特效
Mar 10 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 方便水印和缩略图的图形类
2009/05/21 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
js 操作select相关方法函数
2009/12/06 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
在Python中增加和插入元素的示例
2018/11/01 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
软件测试面试题
2015/10/21 面试题
财务人员求职自荐书范文
2014/02/10 职场文书
教师求职自荐书
2014/06/14 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书