处理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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
Jquery选择器 $实现原理
Dec 02 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
原生JS实现分页
Apr 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实现图片添加水印功能
2014/02/13 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
javascript数组去重小结
2016/03/07 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python中import reload __import__的区别详解
2017/10/16 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python asyncio 协程库的使用
2021/01/21 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
应急处置方案
2014/06/16 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
单方投资意向书
2015/05/11 职场文书
首席执行官观后感
2015/06/03 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书