JavaScript 清除图片背景颜色使之透明

主要JS

/**清除图片背景颜色 **/
function removeImgBg(img) {//背景颜色  白色const rgba = [255, 255, 255, 255];// 容差大小const tolerance = 60;var imgData = null;const [r0, g0, b0, a0] = rgba;var r, g, b, a;const canvas = document.createElement('canvas');const context = canvas.getContext('2d');const w = img.width;const h = img.height;canvas.width = w;canvas.height = h;context.drawImage(img, 0, 0);imgData = context.getImageData(0, 0, w, h);for (let i = 0; i < imgData.data.length; i += 4) {r = imgData.data[i];g = imgData.data[i + 1];b = imgData.data[i + 2];a = imgData.data[i + 3];const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);if (t <= tolerance) {imgData.data[i] = 0;imgData.data[i + 1] = 0;imgData.data[i + 2] = 0;imgData.data[i + 3] = 0;}}context.putImageData(imgData, 0, 0);const newBase64 = canvas.toDataURL('image/png');img.src = newBase64;
}

测试示例：

<!DOCTYPE html>
<html><head><title> new document </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style>html,body {background: #c7bbbb;text-align: center;}</style>
</head><body><img id="img"src='https://img-blog.csdnimg.cn/2022020110394629157.png'><script>setTimeout(() => {removeImgBg(document.getElementById('img'));}, 3000);/**清除图片背景颜色 **/function removeImgBg(img) {//背景颜色  白色const rgba = [255, 255, 255, 255];// 容差大小const tolerance = 60;var imgData = null;const [r0, g0, b0, a0] = rgba;var r, g, b, a;const canvas = document.createElement('canvas');const context = canvas.getContext('2d');const w = img.width;const h = img.height;canvas.width = w;canvas.height = h;context.drawImage(img, 0, 0);imgData = context.getImageData(0, 0, w, h);for (let i = 0; i < imgData.data.length; i += 4) {r = imgData.data[i];g = imgData.data[i + 1];b = imgData.data[i + 2];a = imgData.data[i + 3];const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);if (t <= tolerance) {imgData.data[i] = 0;imgData.data[i + 1] = 0;imgData.data[i + 2] = 0;imgData.data[i + 3] = 0;}}context.putImageData(imgData, 0, 0);const newBase64 = canvas.toDataURL('image/png');img.src = newBase64;}</script>
</body></html>

清除前：

清除后：

JavaScript 清除图片背景颜色使之透明相关推荐

如何把winform图片背景换成透明颜色_如何用photoshop更换图片背景颜色？
生活与工作中我们经过会需要更改图片的背景颜色,首先的软件肯定是photoshop,那么对于不熟悉photoshop的人来说,如何通过这个软件来更改图片的背景色呢,下面和大家分享下小技巧: 首先打开ph ...
python/改变图片尺寸及分辨率/填充透明图片背景颜色
改变图片尺寸及分辨率(dpi): from PIL import Image #调整大小和分辨率(dpi) im = Image.open('2.1.bmp') im = im.resize((188 ...
如何去除图片背景颜色？怎样将背景色变透明？
小伙伴在处理图片的时候,一定会遇到去除图片背景色的情况,即使处理一张图片也是件很痛苦的事情.经常处理图片的小伙伴可以使用ps,对于不会PS的小伙伴如果有一款简单好用的去除图片背景颜色工具,就可以节省很 ...
Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标文字分拆,使用字 ...
PPT制作 ---------插入图片背景颜色与模板的背景颜色不一致
今天在制作ppt时候,遇到插入图片背景颜色与模板的背景颜色不一致,这样做出来效果不好, 在网上查了攻略后,可以利用ppt自带的图片删除背景来调节, 一顿操作后记下来说不定以后工作时候需要使用.
CorelDRAW快速去除图片背景颜色
当我们需要从网上借助一些素材图片在CorelDRAW中运用时,往往需要去掉图片的背景颜色.本文小编分享CDR中如何快速去除图片背景颜色的方法,通过此方法可以做简单的照片抠图.合成. 1. 打开Core ...
背景图片背景颜色同时存在
背景图片背景颜色同时存在 background: url('-/assets//images/search@2x.png') #fff 24px center no-repeat; backgroun ...
html自定义颜色函数,javascript设置元素背景颜色
我有一个 javascript功能,当一个人点击具有onclick功能的元素时,会做一些事情. 我的问题是: 我想要的是,在这个功能中,设置一个字体颜色fot这个函数onclick的html元素.但我 ...
MFC开发IM-第十一篇、MFC设置对话框的背景颜色及设置透明
转载自:http://blog.sina.com.cn/s/blog_673ccb5b01010uwr.html 设置背景颜色: 我用了很多方法都不行,查了很多资料,现在说一下解决方案吧. ...

JavaScript 清除图片背景颜色使之透明

JavaScript 清除图片背景颜色使之透明相关推荐

最新文章

热门文章

JavaScript 清除图片背景颜色 使之透明

JavaScript 清除图片背景颜色 使之透明相关推荐

最新文章

热门文章

JavaScript 清除图片背景颜色使之透明

JavaScript 清除图片背景颜色使之透明相关推荐