Thay đổi màu ảnh trong JavaScript

result là một mảng chứa phiên bản Jimp của hình ảnh và nguồn của nó. Kiểm tra xem bạn có thể làm gì với phiên bản

const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}

Tùy chọn

Repo này sử dụng jimp để sửa đổi màu sắc. Bạn có thể muốn kiểm tra thêm với Jimp

nametyperequireddefaultdescription
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
0
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
1
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2--Source of images
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
3
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
4
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2--Colors to be modified
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
6
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
7
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
9Color difference ΔE
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
0
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
1
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
3Color difference formula
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
4
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
5
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2Match color with the same transparency
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
8
const processResult = (res) => {
    res.map(({ src, image }) => {
        // src: your image source
        // image: Jimp instance

        /* your function */
    })
}
5
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8Search directory recursively

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
2

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
2 chấp nhận nhiều thứ là đầu vào hợp lệ trong
// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
4 (). đường dẫn đến tệp, URL, phiên bản Jimp hoặc bộ đệm

Các tệp được xử lý từng cái một để tránh tình trạng cạn kiệt đột ngột CPU và bộ nhớ

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })

Để xử lý nhiều hình ảnh, bạn có thể chỉ định đường dẫn của một thư mục. Hoặc thậm chí là một mảng đầu vào được chấp nhận

// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
5

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
5 có thể được đặt ở các định dạng khác nhau

// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})

Một

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
7 hợp lệ có thể là một chuỗi hoặc đối tượng hợp lệ làm đầu vào trong
// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
8. Để biết thêm chi tiết, xin vui lòng kiểm tra

Các plugin của

// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
9,
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
0,
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
1,
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
2,
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
3,
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
4 được bật

color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions

// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
5

// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
5 phải là một số trong khoảng từ
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
7 đến
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
8. Những màu có
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
9 bên dưới
// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
0 khiến mọi người khó nhận ra

Để biết thêm, hãy kiểm tra tại đây

// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
1

// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
1 nêu công thức tính
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
9. Bạn có thể chọn giữa
// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
4,
// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
5 và
// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
6

Để biết thêm, hãy kiểm tra tại đây

// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
7

Chỉ những màu có

// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
9 nhỏ hơn
// local directory
ChangeColor({ src: 'path/to/your/directory' })

// an array
ChangeColor({
    src: [
        'path/to/your/directory',
        'https://path/to/your/image.png',
        buffer,
    ]
})
5 VÀ độ trong suốt giống hệt nhau mới được thay thế

Để bỏ qua kiểm tra độ trong suốt, hãy đặt

// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
7 thành
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8

color in imagecolor to match
// in array of object
ChangeColor({
    colors: [{
        from: from_color1,
        to: to_color1,
    }, {
        from: from_color2,
        to: to_color2,
    }]
})

// in object
ChangeColor({
    colors: {
        from_color1: to_color1,
        from_color2: to_color2,
    }
})
7result
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
3
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
3
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2Match
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
6
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
3
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2NOT Match
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
3
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
6
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
2NOT Match
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
3
color = '#333' // hex

color = 'rgba(33, 33, 22, 0.5)' // rgb string

color = { r: 33, g: 33, b: 33, a: 0.5 } // rgb object

// check `colord` for other expressions
6
const ChangeColor = require('change-image-color');

// with a callback
ChangeColor({ /* your configuration */ }, (err, res) => {
    if (err) {
        /* error handling */
    } else {
        processResult(res);
    }
})

// as a Promise
ChangeColor({ /* your configuration */ })
    .then(res => {
        processResult(res);
    })
    .catch(err => {
        /* error handling */
    })
8Match

// installed globally
change-image-color

// installed locally
npx change-image-color
5

// installed globally
change-image-color

// installed locally
npx change-image-color
5 chỉ hoạt động khi chỉ định thư mục trong
// local file
ChangeColor({ src: 'path/to/your/image.png' })

// URL
ChangeColor({ src: 'https://path/to/your/image.png' })

// Jimp instance
ChangeColor({ src: jimpInstance })

// buffer
ChangeColor({ src: buffer })
2

Nó sẽ lặp đệ quy trong thư mục đó để tìm tất cả các hình ảnh. Tuy nhiên, nó sẽ bỏ qua tất cả các thư mục con có tên

// installed globally
change-image-color

// installed locally
npx change-image-color
8,
// installed globally
change-image-color

// installed locally
npx change-image-color
9 hoặc result0

Bạn có thể thay đổi màu của hình ảnh trong JavaScript không?

Chỉ cần tạo một nút có lớp 'nhấp chuột' phù hợp, trong trường hợp này là 'Thay đổi màu sắc hình ảnh nhấp chuột' . Vì vậy, bạn có thể tạo bất cứ thứ gì để được nhấp vào và sẽ thay đổi màu sắc. Nhấp chuột này thêm ID của màu đã đặt để thay đổi (#desaturate). Nếu bất kỳ phần tử phù hợp nào đã có ID, nó sẽ bị xóa.

Làm cách nào để thay đổi màu nền của hình ảnh trong JavaScript?

Cách tiếp cận. .
First of all select your image using HTML tag..
Trong JavaScript, sử dụng hàm Math random() để chọn màu ngẫu nhiên
Chúng tôi sẽ sử dụng trình lắng nghe sự kiện để thay đổi màu sắc hình ảnh. Trình lắng nghe sự kiện được sử dụng để thay đổi màu ngẫu nhiên cho màu nền của hình ảnh đã cho

Bạn có thể đổi màu trong JavaScript không?

Để thay đổi màu của văn bản, bạn có thể sử dụng phương thức “getElementById()” với “style. Thuộc tính color” . Trong trường hợp như vậy, phần tử văn bản có thể được truy cập bằng phương thức getElementById() và sau đó áp dụng thuộc tính màu với sự trợ giúp của kiểu HTML. thuộc tính màu.

JavaScript có thể sửa đổi hình ảnh không?

JavaScript cần thiết để tự động thay đổi cách hiển thị của hình ảnh . Chẳng hạn, phần tử img HTML cung cấp thuộc tính src để sửa đổi nguồn của hình ảnh. Nguồn của hình ảnh có thể là một hệ thống cục bộ hoặc bất kỳ hình ảnh URL nào.