纯前端JS实现一个登记照改换底色背景色功能

说到登记照改换底色功能的实现，我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割、边缘检测、基于语义的物体检测、无监督的像素分类算法等等算法是最好的途径。

而我最近实现了一个登记照改换底色的小工具，可以任意设置登记照的底色，不局限于蓝白红三种最基本的登记照背景颜色。并且它可以根据实际情况来调整背景的色彩、亮度等等，可以让修改底色之后的登记照显得更真实些。

最关键的是，他是纯前端js完成的，是通过操控canvas中的像素点来实现换底色的，并没有用到专业的图像处理或者机器学习方法来进行，纯前端完成，并且效率还挺高的。

事实上，我一开始也尝试使用了tensorflow提供的demo进行图像分割等，实际上效果并不是特别的好，它很适合通过语义将图片内容进行识别和分类，然而却不适合作为像素级的图像分割方式。而opencv却太依赖于java或者c++等语言来开发，在纯前端使用js是比较难与opencv结合使用的。所以最后都放弃了。

这是工具的地址，大家可以先体验一下效果：在线登记照改换底色,证件照改换背景色工具https://www.butterpig.top/photochangebackground

let preCanvas = document.getElementById('canvas')let ctx = preCanvas.getContext('2d')preCanvas.width = this.img.widthpreCanvas.height = this.img.heightctx.drawImage(this.img, 0, 0, this.img.width, this.img.height)let imgData = ctx.getImageData(0, 0, this.img.width, this.img.height);this.dots = [];let r = imgData.data[(4 * imgData.width + 4) * 4];let g = imgData.data[(4 * imgData.width + 4) * 4 + 1];let b = imgData.data[(4 * imgData.width + 4) * 4 + 2];let a = imgData.data[(4 * imgData.width + 4) * 4 + 3]

上面其实是转换的核心部分代码，其实就是通过canvas中的getImageData获取到图片中每个像素点的RGBA值，然后经过自己写的算法对像素点的值进行分析和替换了。所以大家可以尝试一下，当然这个算法也是有很多局限性的，并不能保证每个不同的登记照都能做到完美转换。

纯前端JS实现一个登记照改换底色背景色功能相关推荐

阿发你好java_191122_01 纯前端JS实现的文字验证码
纯前端JS实现的文字验证码作者:邵发本文是Java学习指南系列教程的官方配套文档.内容介绍一种基于JavaScript绘制的纯前端实现的验证码技术.本文附带项目源码及相关JAR包. 1. 验证码 ...
纯前端JS导出Word包含图片
纯前端JS导出Word包含图片纯前端JS导出Word文档包含图片 Word导出方式依赖实现代码纯前端JS导出Word文档包含图片在做项目中,遇到一个需求,是将后台返回的属性以及URL图片导出 ...
纯生js ajax,纯生js实现Element中input组件的部分功能（慢慢完善）并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
图片纯前端JS压缩的实现
一.功能体验先看demo:使用canvas在前端压缩图片并上传demo 如下截图: 点击文件选择框,我们不妨选一张尺寸比较大的图片,例如下面这种2M多的钓鱼收获照: 于是图片歘歘歘地传上去了: 此时 ...
纯前端JS实现人脸识别眨眨眼张张嘴案例
在不久之前我发布了一个案例,是java通过百度云人脸识别接口实现活体检测(张张嘴和眨眨眼)的案例,大家可以去看看:人脸识别活体检测之眨眨眼和张张嘴,今天我就抽空更新一下纯JS的活体检测吧. 首先给大家 ...
纯前端JS实现文件上传解析渲染页面
AI真的能代替前端吗? 回答:不会完全代替能用吗?复制到项目中只会报错爆红 --他完全不能理解你需要什么 JavaScript(简称JS)是一种轻量级的脚本语言,主要用于在Web页面上添加交互行为 ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...
【Bilibili直播源】浏览器抓取真实直播源地址(纯前端JS PHP解析源码)
浏览器分析B站直播的直播源地址 0. 前言 1. 直播源查找 2. 浏览器请求过程分析及思路 3. 模拟实现 4. 整合播放器 5. 总结 0. 前言之前只知道B站是点播的,很多up主可以上传自己的 ...
前端js获取一个数组中的连续数字
var oldArr = [1,2,3,7,8,9,15,17,18,19];//根据这个数组可以得到一下一个二维数组var newArr = [[1,2,3],[7,8,9],[15],[17,18 ...

纯前端JS实现一个登记照改换底色背景色功能

纯前端JS实现一个登记照改换底色背景色功能相关推荐

最新文章

热门文章