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

目录
  • 问题：canvas绘制图片，图片变模糊
  • 那么如何去处理这样的问题呢？
    • 要点：两个点
  • 解决方案
    • 方法一
    • 方法二
    • 方法三

问题：canvas绘制图片，图片变模糊

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

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

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

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

要点：两个点

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

了解canvas的绘制原理（*打星号）

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

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

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

所以当一张图片被绘制到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效果，请自行鉴别嗷。

方法三

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

以上就是面试中canvas绘制图片模糊图片问题处理的详细内容，更多关于面试canvas绘制图片模糊解决的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue实现pdf导出解决生成canvas模糊等问题(推荐)

    最近公司项目需要,利用vue实现pdf导出,从而保存到本地打印出来,说起来好像也很容易,具体要怎么实现呢? 1  .我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install --save html2canvas 3 第二个.将图片生成pdf 4 npm install jspdf --save 2 .定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ' src /utils/htmlToPdf' ) // 导出页面为PDF

  • js canvas画布实现高斯模糊效果

    js canvas画布实现高斯模糊效果

    最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

  • js canvas实现擦除动画

    本文实例为大家分享了canvas擦除动画的实现原理.实现代码.以及在实现过程中遇到的问题,供大家参考,具体内容如下 原理总结为就是在移动设备上将某张图片擦掉显示另一张图片,利用canvas来实现. 如果是用户手动擦除,则需要监听touchmove,touchend等事件,并计算相应的坐标,利用canvas的clearRect或rect 画弧线或画线来实现.但是这会造成在androd手机上存在卡顿的现象. canvas有个globalCompositeOperation属性,这个属性的默认值是so

  • canvas绘图不清晰的解决方案

    canvas绘图不清晰的解决方案

    现象描述 同样大小的图片(60x60px)用canvas和DOM绘制,结果发现canvas的画面质量要差很多.结果如下图所示. 上图中,左侧红框中的金币采用DOM绘制,右侧和下方的金币和文字等使用canvas绘制,结果canvas绘制的图片模糊不清. 原因分析 假设dpr = 2:图片大小为60x60px;对dpr有一定的了解基础. 1.DOM呈现图片过程 图片-->浏览器css像素(显示尺寸)-->屏幕实际像素 60x60              30x30                

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

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

    目录 问题:canvas绘制图片,图片变模糊 那么如何去处理这样的问题呢? 要点:两个点 解决方案 方法一 方法二 方法三 问题:canvas绘制图片,图片变模糊 设定一个一定尺寸的canvas,我这里设置的画布大小是400px*400px.当一张图片完全画到画布上的时候,大概率都会出现图片模糊的情况.我拿下面一张图片画到canvas上作为例子,看上去应该比较明显的有模糊的感觉. 单方面的去修改图片精度,换成更高清的图片,事实证明确实有一丢丢用,但是效果不是很明显.况且我当时那个图片由于是手绘的

  • 微信小程序canvas绘制圆角base64图片的实现

    接口返回base64格式小程序二维码,以往的做法是需要再调一个接口去拿到jpg/png格式的图片.如果没有这个接口呢,是不是也可以?然而小程序canvas并不支持直接使用base64绘制,好在小程序的文件系统提供了方法,可以把base64经过进一步处理转成本地图片. 获取base64格式图片 getXcxQrcode() { wx.request({ url: app.globalData.globalUrl + "/get_wx_code", data: { token: app.g

  • Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

    1 前言 1.1 业务场景 图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域. 由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开. 2 实现原理 2.1 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas"

  • IOS 中CALayer绘制图片的实例详解

    IOS 中CALayer绘制图片的实例详解

    IOS 中CALayer绘制图片的实例详解 CALayer渲染内容图层.与UIImageView相比,不具有事件响应功能,且UIImageView是管理内容. 注意事项:如何使用delegate对象执行代理方法进行绘制,切记需要将delegate设置为nil,否则会导致异常crash. CALayer绘制图片与线条效果图: 代码示例: CGPoint position = CGPointMake(160.0, 200.0); CGRect bounds = CGRectMake(0.0, 0.0

  • js HTML5 canvas绘制图片的方法

    js HTML5 canvas绘制图片的方法

    本文实例为大家分享了HTML5 canvas绘制图片的具体代码,供大家参考,具体内容如下 demo.js window.onload=function() { createcanvas(); drawImage(); } function createcanvas() { var CANVAS=document.getElementById('mycanvas'); context=CANVAS.getContext('2d'); } function drawImage() { var img

  • jquery canvas绘制图片验证码实例

    本文实例为大家分享了jquery canvas绘制图片验证码的具体代码,供大家参考,具体内容如下 CSS .identify-code{ position: absolute; right: 6px; top: 50%; width: 118px; height: 40px; margin: -21px 0 0 0; } HTML <span id="code" class="identify-code"> <canvas class="

  • PHP中使用Imagick实现各种图片效果实例

    imagick是一个功能强大的图像处理库.  说是翻译 其实就是简要介绍imagick 的主要功能的或者说是我觉得比较实用的功能函数的介绍 以及使用的例子.  因为本人的英语水平有限,所以采用比较通俗或者说比较贴近应用化的语言来描述.  先欣赏一组炫丽的效果: 偏置图像:   例子: 复制代码 代码如下: <?php  ini_set('display_errors',1);  header('Content-type: image/jpeg');  $image = new Imagick('

  • Android开发中使用颜色矩阵改变图片颜色，透明度及亮度的方法

    Android开发中使用颜色矩阵改变图片颜色，透明度及亮度的方法

    本文实例讲述了Android开发中使用颜色矩阵改变图片颜色,透明度及亮度的方法.分享给大家供大家参考,具体如下: 一.如图 二.代码实现 public class ColorImageActivity extends Activity { private ImageView mImageView; private SeekBar mSBRed,mSBGreen,mSBBlue,mSBAlpha,mSBLight; //修改后的图片 private Bitmap mModBitmap; //画布

  • 微信小程序canvas.drawImage完全显示图片问题的解决

    问题描述 问题产生 对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的 导入初始项目 打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工具,如已安装则直接唤起,没有则会提示下载 目的 通过对canvas绘图过程的修改,或者其样式的修改,达到完全显示,并自适应不同机型的目的 解决方案 准备工作 Page({ data:{ imgSrc: '', // 需要处理图片地址 imgW: '', // canvas 宽度 imgH: '',

  • Android App中使用Glide加载图片的教程

    Android App中使用Glide加载图片的教程

    与其他图片加载库相同,Glide除了可以加载网络图片之外,也可以加载本地图片.甚至还可以从各种各样奇葩的数据源中加载图片. 加载网络图片 很多情况下,我们使用图片加载库就是为了加载网络图片.网络操作是一个很复杂的东西.试想一下,如果没有图片加载库,我们就要手动去下载图片,缓存图片,最后再从文件里面读取bitmap并设置到Imageview里面.这还算好的,要是在Listview里面你会更头疼的.原因我就不说了,你懂的~~再加上各种各样的Bitmap操作,保准你再也不想撸代码了.而且Bitmap这

随机推荐