处理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动态调整iframe高度的方法
Mar 06 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
小程序登录之支付宝授权的实现示例
Dec 13 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
自动跳转中英文页面
2006/10/09 PHP
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP简单遍历对象示例
2016/09/28 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
JavaScript中各种编码解码函数的区别和注意事项
2010/08/19 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
单链表反转python实现代码示例
2018/02/08 Python
Python多进程原理与用法分析
2018/08/21 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python 常见的反爬虫策略
2020/09/27 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
合作意向书格式及范文
2014/03/31 职场文书
什么是就业协议书
2014/04/17 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
学习型班组申报材料
2014/05/31 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
车位出租协议书范本
2016/03/19 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书