0
0

使用js实现证件照p图，背景扣除和替换，完全开源！！！！

概述

不知道大家有没有被网上的一些付费软件恶心到，昨天本来想p个证件照背景颜色，百度一打开，全是说的免费，一点进去，修好背景之后，下载就要开始付费了。于是我写了以下代码，大家放心，完全免费开源，需要的自取

实现效果

js实现证件照背景色替换

源代码

随便新建一个文件为index.html，将代码复制进去，保存然后双击，即可使用，源码如下

  1. <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Document</title></head><body><input type="file" id="fileDom"/><canvas width="150" height="150"></canvas>
  2.     颜色：
  3.     <input type="color" id="self_color"/>&nbsp 透明度(0-255,0表示透明，255表示不透明)：
  4.     <input type="number" id="self_op"/><button id="confirm">确认</button><button id="exp">导出</button></body><script>const cvs = document.querySelector("canvas");const btn = document.querySelector("#confirm");const exp = document.querySelector("#exp");const selfColor = document.querySelector("#self_color");const selfOp = document.querySelector("#self_op");const fileDom = document.querySelector("#fileDom");let opitityNum =255;let greenColor =[220,190,190,255];let ctx = cvs.getContext("2d",{
  5.       willReadFrequently:true,});let originalImageData;functioninit(src){if(!src){return;}const img =newImage();
  6.       img.crossOrigin ="";
  7.       img.src = src ||"";
  8.       img.onload=()=>{
  9.         cvs.width = img.width;
  10.         cvs.height = img.width;
  11.         ctx = cvs.getContext("2d",{
  12.           willReadFrequently:true,});
  13.         ctx.drawImage(img,0,0);
  14.         originalImageData = ctx.getImageData(0,0, img.width, img.width);};}functionconfirm(){
  15.       ctx.putImageData(imgData,0,0);
  16.       originalImageData = ctx.getImageData(0,0, cvs.width, cvs.height);}functionexportImg(){var imgDataURL = cvs.toDataURL();var a = document.createElement("a");
  17.       a.href = imgDataURL;
  18.       a.download ="image.png";
  19.       document.body.appendChild(a);
  20.       a.click();
  21.       document.body.removeChild(a);}init();let imgData = ctx.getImageData(0,0, cvs.width, cvs.height);
  22.     btn.onclick = confirm;
  23.     exp.onclick = exportImg;
  24.     selfOp.onchange=function(){
  25.       opitityNum = selfOp.value;
  26.       cvs.click();};
  27.     selfColor.onchange=()=>{
  28.       cvs.click();};
  29.     fileDom.onchange=async(e1)=>{let file =awaitfileToBase64(e1.target.files[0]);init(file);};
  30.     cvs.addEventListener("click",(e)=>{
  31.       greenColor =conversion(selfColor.value);const x = e.offsetX;const y = e.offsetY;if(!originalImageData){console.error("原始图像数据未初始化！");return;}
  32.       ctx.putImageData(originalImageData,0,0);
  33.       imgData = ctx.getImageData(0,0, cvs.width, cvs.height);const clickColor =getColor(x, y, imgData);const stack =[{ x, y }];while(stack.length >0){const{ x, y }= stack.pop();if(x <0|| x >= cvs.width || y <0|| y >= cvs.height){continue;}const i =point2Index(x, y);const color =getColor(x, y, imgData);if(diff(color, clickColor)&&diff1(color, greenColor)!==0){
  34.           imgData.data.set(greenColor, i);
  35.           stack.push({ x: x +1, y });
  36.           stack.push({ x: x -1, y });
  37.           stack.push({ x, y: y +1});
  38.           stack.push({ x, y: y -1});}}
  39.       ctx.putImageData(imgData,0,0);});functionfileToBase64(file){returnnewPromise((resolve, reject)=>{const reader =newFileReader();
  40.         reader.readAsDataURL(file);
  41.         reader.onload=function(){const base64String = reader.result.split(",")[1];resolve(reader.result);};
  42.         reader.onerror=function(){reject(newError("Failed to load file"));};});}functionpoint2Index(x, y){return(y * cvs.width + x)*4;}functionconversion(value){let reg =/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;let color = value.toLowerCase();if(reg.test(color)){if(color.length ===4){let colorNew ="#";for(let i =1; i <4; i +=1){
  43.             colorNew += color.slice(i, i +1).concat(color.slice(i, i +1));}
  44.           color = colorNew;}let colorChange =[];for(let j =1; j <7; j +=2){
  45.           colorChange.push(parseInt("0x"+ color.slice(j, j +2)));}
  46.         colorChange.push(opitityNum);return colorChange;}else{return color;}}functiongetColor(x, y, imageData){const i =point2Index(x, y);return[
  47.         imageData.data[i],
  48.         imageData.data[i +1],
  49.         imageData.data[i +2],
  50.         imageData.data[i +3],];}functiondiff1(color1, color2){const res =
  51.         Math.abs(color1[0]- color2[0])+
  52.         Math.abs(color1[1]- color2[1])+
  53.         Math.abs(color1[2]- color2[2])+
  54.         Math.abs(color1[3]- color2[3]);return res;}functiondiff(color1, color2, tolerance =30){const rDiff = Math.abs(color1[0]- color2[0]);const gDiff = Math.abs(color1[1]- color2[1]);const bDiff = Math.abs(color1[2]- color2[2]);return rDiff <= tolerance && gDiff <= tolerance && bDiff <= tolerance;}</script></html>
标签： javascript ecmascript
本文转载自: https://blog.csdn.net/m0_70711237/article/details/136024931
版权归原作者 小玛喽 所有， 如有侵权，请联系我们删除。
登录后发布评论

“使用js实现证件照p图，背景扣除和替换，完全开源！！！！”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。