js正则获取rgba里的rgb值

// 正则
let rgx = /^rgba\(((,?\s*\d+){3}).+$/

let str = 'rgba(0, 0, 0, 1)'

//打印 rgb(0, 0, 0)
console.log (str.replace(rgx, 'rgb($1)'));


实例:改变rgba的透明度:

let bgColor = str.replace(rgx, 'rgba($1, .5)')

console.log(bgColor ) // 打印rgba(0, 0, 0, .5)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如果您不想使用 Canvas API 绘制图片来获取 RGB ,也可以使用 JavaScript 中的 Image 对象来获取图片的 RGB 。不过需要注意的是,这种方法只适用于同域的图片,因为跨域图片会触发浏览器的跨域保护机制。 具体操作步骤如下: 1. 创建一个 Image 对象,并设置其 src 属性为要获取 RGB 的图片地址: ```javascript var img = new Image(); img.src = 'your-image-url'; ``` 2. 将 Image 对象绘制到一个 Canvas 上: ```javascript var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); context.drawImage(img, 0, 0); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var pixels = imageData.data; // 每个像素点的 RGB 存储在一维数组中 ``` 这样,pixels 数组中每四个元素代表一个像素点的 RGBA ,即数组中第一个元素为红色通道的,第二个元素为绿色通道的,第三个元素为蓝色通道的,第四个元素为透明度的。因此,获取一个像素点的 RGB 可以通过下面的方式: ```javascript var pixelIndex = (y * canvas.width + x) * 4; // 根据像素点的坐标计算出在数组中的位置 var red = pixels[pixelIndex]; var green = pixels[pixelIndex + 1]; var blue = pixels[pixelIndex + 2]; ``` 其中 x 和 y 分别为像素点在图片中的横纵坐标。 需要注意的是,如果图片没有加载完成,getImageData() 方法会抛出 SecurityError 异常。因此,最好在 Image 对象的 onload 事件中执行绘制和获取 RGB 的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清岚_lxn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值