canvas图像识取技术以及智能化思考

徐小夕 等级 774 0 0

canvas图像识取技术以及智能化思考

笔者最近一直在研究 前端可视化搭建化 的技术, 最近也遇到一个非常有意思的课题, 就是基于设计稿自动提取图片信息, 来智能化出码. 当然本文并不会介绍很多晦涩难懂的技术概念, 我会从几个实际应用场景出发, 介绍如何通过canvas图像识取技术来实现一些有意思的功能. 最后会总结一些对智能化的思考以及对低代码方向的规划, 希望能对各位有所启发.

canvas图像识取技术

熟悉前端的朋友们也许对canvas并不陌生, 接下来我会带大家去实现如下几个应用场景, 来深入理解canvas图像识取技术.

  • 基于图片动态生成网站主色和渐变色
  • 基于图片/设计稿一键生成网站配色方案
  • 图像识别技术方案

基于图片动态生成网站主色和渐变色

也许有朋友会问, 基于图片动态生成网站主色和渐变色, 它能解决什么问题呢? 又有怎样的应用场景呢? 这里笔者举几个实际应用的例子.

网易云音乐大家也许不陌生, 细心的朋友也许可以观察到, 网站banner部分的背景, 是不是很好的和banner形成很好的统一? canvas图像识取技术以及智能化思考

我们会发现, 每个轮播图的背景都基于当前图片颜色进行的渐变或模糊, 来实现和轮播图实现完美的统一. 目还有还很多类似的例子, 比如图片网站的背景, 图片卡片的背景, 都应用了类似的技术.

实现原理

我们知道canvas对象有3个方法:

  • createImageData() 创建新的、空白的 ImageData 对象
  • getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据
  • putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上

为了分析图片数据, 我们需要用到上述的第二个方法getImageData. ImageData 对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息。对于 ImageData 对象中的每个像素,都存在着四元信息,即 RGBA 值:

  • R - 红色(0-255)
  • G - 绿色(0-255)
  • B - 蓝色(0-255)
  • A - alpha 通道(0-255; 0 是透明的,255 是完全可见的)

color/alpha 信息以数组形式存在,并存储于 ImageData 对象的 data 属性中。

有了以上的技术基础, 我们就完全有可能提取到图片的颜色信息, 并分析出图片的主色了. 所以我们的实现流程如下:

canvas图像识取技术以及智能化思考

实现的参考代码如下:

img.onload = function () {
    ctx.drawImage(img, 0, 0)
    img.style.display = 'none'
    // 获取像素数据
    let data = context.getImageData(0, 0, img.width, img.height).data
    // ImageData.data 类型为Uint8ClampedArray的一维数组,每四个数组元素代表了一个像素点的RGBA信息,每个元素数值介于0~255
    let r = 0,
        g = 0,
        b = 0

    // 取所有像素平均值
    for (let row = 0; row < img.height; row++) {
        for (let col = 0; col < img.width; col++) {
            r += data[(img.width * row + col) * 4]
            g += data[(img.width * row + col) * 4 + 1]
            b += data[(img.width * row + col) * 4 + 2]
        }
    }

    // 计算平均值
    r /= img.width * img.height
    g /= img.width * img.height
    b /= img.width * img.height

    // 将结果取整
    r = Math.round(r)
    g = Math.round(g)
    b = Math.round(b)

    // 给背景设置渐变
    bgBox.style.backgroundImage = `linear-gradient(rgb(${r}), rgb(${g}), rgb(${b})`;
  }

值得说明的是, 根据不同的区值场景, 我们还可以用到其他算法诸如:

  • 平均值算法(获取主色调)
  • 中位切分法(获取png图片的主色)
  • 互补色计算法

基于图片/设计稿一键生成网站配色方案

以上介绍了使用canvas的取色方案, 接下来我们更进一步, 来探索一下如何基于图片/设计稿一键生成网站配色方案.

其实基于以上的例子我们完全可以自己实现一套网站配色生成工具, 这里为了节约时间, 笔者推荐一款比较强大的插件, 来帮我们实现类似的功能.

canvas图像识取技术以及智能化思考

没错, 就是colorthief, 它支持浏览器和node环境, 所以作为前端, 我们可以很轻松的使用它并获取图像/设计稿的配色方案.

github传送门: 在线生成图片色系方案库

简单的使用例子如下:

import ColorThief from './node_modules/colorthief/dist/color-thief.mjs'

const colorThief = new ColorThief();
const img = document.querySelector('img');

if (img.complete) {
  colorThief.getColor(img);
} else {
  image.addEventListener('load', function() {
    colorThief.getColor(img);
  });
}

该库还有很多细化的api,比如控制生成质量, 粒度等, 我们可以以用它做一些更加智能的工具.

图像识别技术方案

图像识别技术可以帮助技术人员利用计算机对图像进行处理和分析,更好地识别各种不同模式的目标。 图像识别的过程和内容是比较多的,主要包括图像预处理和图像分割等内容,它在图像处理中的有效应用,还能够根据图像的特点对其进行判断匹配,让用户能够更加快速的地在图片中搜索自己想要获取的信息。

了解神经网络的朋友可能知道, 图像识别技术真正的解决方案是 卷积神经网络(CNNs或ConvNets).

从图像识别技术的术语来说就是,卷积神经网络按照关联程度筛选不必要的连接,进而使图像识别过程在计算上更具有可操作性。卷积神经网络有意地限制了图像识别时候的连接,让一个神经元只接受来自之前图层的小分段的输入(假设是3×3或5×5像素),避免了过重的计算负担。因此,每一个神经元只需要负责处理图像的一小部分。

当然作为前端工程师, 我们可能还涉及不到这么深的内容, 不过也不用担心, 目前已有很多工具帮我们解决了底层的分析难题. 比如国内比较有名的imgcook, 通过识别技术来生成可被浏览器消费的html代码.

canvas图像识取技术以及智能化思考

其工作机制如下:

canvas图像识取技术以及智能化思考

其底层识别技术也是基于对图片信息元的分析, 提取和转化, 来实现智能化编排的目的. 当然也有一些开源的库可以帮我们做到一定程度的识别能力. 我们可以基于这些方案, 制作一些对开发更智能化的工具.

这里笔者提一个图片识别的库GOCR.js, 供大家参考学习.

canvas图像识取技术以及智能化思考

GOCR.js 是 GOCR(开源的 OCR 光学识别程序)项目的纯 JavaScript 版本,使用 Emscripten 进行自动转换。这是一个简单的 OCR (光学字符识别)程序,可以扫描图像中的文字回文本。

该库的使用也非常简单, 我们只需要引入该库, 输入如下代码即可:

var string = GOCR(image);
alert(string);

演示如下:

canvas图像识取技术以及智能化思考

智能化思考

最近几年国内外lowcodenocode平台发展迅猛, 对于基础的搭建化已不能满足科技企业的需求, 智能化/自动化搭建平台不断涌现. 笔者之前文章 分享10款2021年国外顶尖的lowcode开发平台 也介绍过很多国外的优秀lowcode平台, 很多也对智能化有了很多的实践落地. 笔者简化如下:

canvas图像识取技术以及智能化思考

最近H5-Dooring可视化编辑器也在持续推迭代, 数据源已基本搭建完成, 后续还会按照更智能化的方向, 可视化大屏V6.Dooring也已上线第一个版本.

canvas图像识取技术以及智能化思考

国内lowcode平台仍然有很长的路要走, 期待大家一起努力💪!

更多 低代码 / 可视化 相关的技术分享和实现, 欢迎 微信 搜索 趣谈前端 学习探索.

收藏
评论区

相关推荐

图形处理:给 Canvas 文本填充线性渐变
在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多;就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y。 渐变示例.jpg(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/48edf7ce289dab3e1972d973aa
Canvas入门实战之用javascript面向对象实现一个图形验证码
本文主要介绍用canvas实现图形验证码的一些思路以及如何用javascript面向对象的方式更友好的实现canvas的功能,关于canvas的一些基本使用方法和API我整理了一个思维导图,大家感兴趣的可以参考学习。 (https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b158fad95
30分钟开发一款抓取网站图片资源的浏览器插件
前言 由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项. 你将收获 如何快速上手浏览器插件开发 浏览器插件开发的核心概念 浏览器插件的通信机制 浏览器插件的数据存储 浏览器插件的应用场景 开发一款抓取网站图片资源
android 面试题总结
Java部分 一、多线程   Join()  线程加入,执行此方法的线程优先使用cpu   Yeild()  线程释放资源使所有线程能有相等的机会使用cpu   Sleep() 相当于让线程睡眠,交出CPU,让CPU去执行其他的任务(不会释放锁)。 Wait()方法会让线程进入阻塞状态,并且会释放线程占有的锁,并交出CPU执行权限。
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
Android开发 - 获取Android设备的唯一标识码(Android 6.0或更高)
在我们的APP开发中,通常需要获取到设备的唯一标识。在Android6.0之前,有很多方法我们可以方便获取到硬件的唯一标识,但是在Android6.0之后,Android系统大幅限制了我们获取设备的硬件信息。 Android6.0之前的方法(已过时) 1. DEVICE\_ID 通getSystem
微信小程序---使用Echarts和分包
微信小程序中使用Echarts和分包假期虽然结束了,但是它以另外一种形式展示我们身上(摸摸自己的小肚子)。在小程序上以图形化显示数据就是分给我的假期预研任务,查了一下网上大佬们的文章了解到了Ucharts,F2,Wxcharts和Echarts,只尝试了F2和Echarts,由于Echarts的最近更新最近和我对Echa
商业数据分析从入门到入职(9)Python网络数据获取
@toc 前言本文主要讲Python最常见的应用之一——网络数据获取,即爬虫:先介绍了网页和网络的基础知识,为从网页中获取数据打好基础;接下来以两个案例介绍从网络中获取数据和处理数据的不同方式,以进一步认识Python爬虫和数据处理。 一、网络和网页基础知识 1.数据来源数据源有很多,可以从数据库中获取,可以从文件中获取,也可以从
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
永久激活并汉化webstorm
激活 1、下载webstorm链接:https://pan.baidu.com/s/13kPsfZmPIZP2EtaNcNqn8A提取码:di43 2、下载补丁文件: 链接:https://pan.baidu.com/s/10uXF1PH9Q6b6wWH2WqmWg提取码:hpr8 3、修改两个文件把我们下载好的补丁文件 JetbrainsC
canvas图像识取技术以及智能化思考
笔者最近一直在研究 前端可视化 和 搭建化 的技术, 最近也遇到一个非常有意思的课题, 就是基于设计稿自动提取图片信息, 来智能化出码. 当然本文并不会介绍很多晦涩难懂的技术概念, 我会从几个实际应用场景出发, 介绍如何通过canvas图像识取技术来实现一些有意思的功能. 最后会总结一些对智能化的思考以及对低代码方向的规划, 希望能对各位有所启发. canv
我用Python批量读取考生成绩单,并自动发送录取通知书邮件
01前言 大家好,我是J哥。 高考刚结束不久,很多小伙伴肯定都期待有个好成绩,能够进入理想的大学。而一旦成绩出来,大学招生办老师将面临给广大学子发送录取通知书的巨大工作压力,本文将利用Python技术,手把手教你用Python批量读取考生成绩,邮件合并且自动发送邮件,赶紧学起来吧 需求如下: 02准备工作 首先,我们将图中三个文件置
NDK开发前奏 - 实现支付宝人脸识别功能
1. 基于 Android Studio 的 opencv 配置与使用先推荐一本书 《计算机视觉 算法与应用》,相信用过 OpenCV 的哥们都知道这是用来干啥的,这里我就不再啰嗦。只说一下他的应用领域:人机互动、物体识别、图像分割、人脸识别、动作识别、运动跟踪、机器人、运动分析、机器视觉、结构分析、汽车安全驾驶等等。这次我们主要用它来做人脸识别,注意人脸
Android仿支付宝淘宝 - 自定义密码输入框和键盘
1.概述 最近有人在问我要所有项目的代码,我在这里声明一下我不是这几个项目公司内部人员,之所以录视频和写博客也是喜欢与人分享和学习而已,最终所有的代码肯定会上传的,只不过会要等全部的效果以及设计模式搞完。在这里感谢内涵段子这个项目,感谢那些提供帮助的博客牛人,希望有一天也能和你们一样。      部分人看了视频的反馈某些地方没讲的很细,首先这肯定是我的