使用canvas做纯色或渐变色图片优化 img图片拉伸-低调大师

使用canvas做纯色或渐变色图片优化 img图片拉伸

2020-11-28 563

基本思想是对于简单的纯色或者渐变色, 可以使用canvas画出来, 然后导出url, 再在img中缩放拉伸

下面窄的是canvas画的, 理论上只需要画一个像素宽就行了, 下面是img标签渲染的, 拉伸后也不会有模糊, 这种方式可能节省不少流量, 而且加载速度也会快一些, 主要是在一些大型活动中使用, 不过坏处就是必须图像不能太复杂, 不然不太好画

img标签的大小, 最后在外面包一层div, 通过控制外层div的大小来控制img的大小, 而且div可以通过padding实现指定比例的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #img {
        width: 100%;
        height: 100%;
      }

      #div {
        width: 200px;
        height: 300px;
        /* background-size: 100% 100%; */
      }

      .img-wrap {
        width: 200px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div class="img-wrap">
      <img id="img" alt="" />
    </div>
    <div s id="div" alt="" />
    <script>
      const clamp = (n, min, max) => {
        if (n < min) return min
        if (n > max) return max
        return n
      }

      const canvas = document.getElementById("canvas")
      const ctx = canvas.getContext("2d")
      const img = document.getElementById("img")
      const div = document.getElementById("div")
      console.log("==", canvas, img)
      const w = 10
      const h = 255
      canvas.width = w
      canvas.height = h

      const buf = new Uint8ClampedArray(w * h * 4)
      for (let i = 0; i < w; i++) {
        for (let j = 0; j < h; j++) {
          const a = clamp(255 - j, 20, 250)
          const r = 0
          const g = j > 200 ? 255 : 0
          const b = 255
          //   const r = clamp(j, 30, 220)
          //   const g = clamp(125 - j, 30, 220)
          //   const b = clamp(255 - j, 30, 220)
          const idx = (j * w + i) * 4
          console.log("idx", i, j, idx)
          buf[idx] = r
          buf[idx + 1] = g
          buf[idx + 2] = b
          buf[idx + 3] = a
        }
      }
      const imageData = new ImageData(buf, w, h)
      console.log(imageData)
      ctx.putImageData(imageData, 0, 0)
      const url = canvas.toDataURL()
      console.log("url", url)
      img.src = url

      // div.style.backgroundImage = `url(${url}) no-repeat`
      //   div.style.background = `url(${url})`
      // div.style.backgroundSize = "contain"
      // div.style.backgroundSize = "cover"

      div.style.backgroundImage = `url(${url})`
      div.style.backgroundSize = "cover"
      //   div.style.backgroundSize = "100px 100px"
    </script>
  </body>
</html>

微信关注我们

原文链接：https://my.oschina.net/ahaoboy/blog/4758206

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

一文教你如何构建自己的函数库

话说ISOC99有自己的一系列标准C函数库，例如我们熟悉的libc.a（包含标准I/O函数、字符串操作函数和整数数学函数）和libm.a（浮点数数学函数），可供我们在使用gcc编译工具编译程序时调用。那么，如果我们在日常学习或项目开发中积累了许多好的函数，希望日后在其他项目中能够复用时，我们又该如何去保存他们呢？今天我就告诉大家怎么办？ 1. 看gcc编译器都干了些什么？所谓，知己知彼，百战不殆。首先，用一个例子带大家了解一下gcc的编译过程。 //main.c int sum (int *a, int n); int array[2] = {1, 2}; int main() { int val = sum(array, 2); return val; } //sum.c int sum(int *a, int n) { int i, s = 0; for(i=0; i < n; i++){ s += a[i]; } return s; } 假如一个项目共有以上2个源程序组成。main函数初始化一个整数数组，然后调用一个定义在另一个文...

2020-11-28

1146

微信公众号：云计算通俗讲义持续输出技术干货，欢迎关注！通过本文你将了解：背景概述模式结构代码实现特点应用场景背景在某些情况下，一个客户不想或者不能直接引用一个对象，此时可以通过一个称之为“代理”的第三者来实现间接引用。代理对象可以在客户端和目标对象之间起到中介的作用，并且可以通过代理对象去掉客户不能看到的内容和服务或者添加客户需要的额外服务。通过引入一个新的对象来实现对真实对象的操作或者将新的对象作为真实对象的一个替身，这种实现机制即为代理模式，通过引入代理对象来间接访问一个对象，这就是代理模式的动机。概述代理模式(Proxy Pattern) ：给某一个对象提供一个代理，并由代理对象控制对原对象的引用。代理模式的英文叫做Proxy或Surrogate，它是一种对象结构型模式。模式结构代理模式包含如下角色： Subject: 抽象主题角色抽象主题角色声明了真实主题和代理主题的共同接口，实现了调用方和服务方的解耦。 Proxy: 代理主题角色代理主题角色内部包含对真实主题的引用，从而可以在任何时候操作真实主题对象。 RealSubject: 真实主题角色...

2020-11-29

468

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。