lọc. không ai. mơ hồ(). độ sáng(). trái ngược(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url(); Show
Mẹo. Để sử dụng nhiều bộ lọc, hãy tách từng bộ lọc bằng dấu cách. Lưu ý rằng thứ tự là quan trọng (i. e. sử dụng thang độ xám () sau màu nâu đỏ () sẽ dẫn đến hình ảnh hoàn toàn màu xám) Thuộc tính Ví dụ giải thíchKhối CSS đầu tiên tương tự như mã trong Ví dụ 1. Ngoài ra, chúng tôi đã thêm điều gì sẽ xảy ra khi người dùng di chuột qua một trong các hình ảnh. Trong trường hợp này, chúng tôi muốn hình ảnh KHÔNG trong suốt khi người dùng di chuột qua nó. CSS cho điều này là Khi con trỏ chuột di chuyển ra khỏi hình ảnh, hình ảnh sẽ trong suốt trở lại Một ví dụ về hiệu ứng di chuột đảo ngược Hộp trong suốtKhi sử dụng thuộc tính Minh bạch sử dụng RGBANếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha (RGBA) - chỉ định độ mờ cho màu Giá trị màu RGBA được chỉ định với. rgba (đỏ, lục, lam, alpha). Tham số alpha là một số trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (đục hoàn toàn) Tôi tin rằng với HTML 5 Canvas và Javascript, giờ đây bạn có thể phát hiện một màu cụ thể trên hình ảnh và thay đổi nó Về cơ bản, tôi đang tìm cách xây dựng hệ thống hình đại diện cho một trò chơi, vì vậy tôi đang suy nghĩ trước khi xây dựng hình ảnh đại diện (html5 canvas), tôi có thể thay đổi màu sắc của hình ảnh áo phông Tôi tìm thấy đoạn mã dưới đây trên web và có thể xem nó tại liên kết này. https. // đô vật. c7. ixsecure. com/avatar/kiểm tra. php <!DOCTYPE html> <html> <head> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); } // Define the source of the image. // This file must be on your machine in the same folder as this web page. myImage.src = "maletshirtred.png"; } } function getColorData() { myImage = ctx.getImageData(0, 0, 200, 222); // Loop through data. for (var i = 0; i < picLength * 4; i += 4) { // First bytes are red bytes. // Remove all red. myImage.data[i] = 2; // Second bytes are green bytes. // Third bytes are blue bytes. // Fourth bytes are alpha bytes } } function putColorData() { ctx.putImageData(myImage, 0, 0); } </script> </head> <body onLoad="displayImage()"> <img id="myPhoto" src="maletshirtred.png"><br> <canvas id="myCanvas" width="200" height="222"> </canvas> </body> </html> </body> </html> có vẻ như đó là myImage. dữ liệu = 2; vậy ai đó có thể sửa mã ở trên hoặc chỉ cho tôi đúng hướng về cách thực hiện việc này không? Về cơ bản, tôi đang tìm cách thay đổi một màu thành bất kỳ màu nào mà một thành viên muốn, không chắc chắn 100% là có thể thực hiện việc này. Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn  chỉ là một vài anh chàngĐăng ngày 5 tháng 6 năm 2017 chỉ là một vài anh chàng
Đăng ngày 5 tháng 6 năm 2017 Nếu bạn tra cứu getImageData, bạn sẽ nhận ra rằng nó trả về một mảng tương ứng với các giá trị màu cho mỗi pixel. Mỗi pixel có giá trị màu đỏ, xanh lá cây, xanh dương và alpha. Các nhận xét trong mã đó gợi ý về điểm đó, nhưng bạn cũng có thể tra cứu tài liệu https. //www. w3schools. com/tags/canvas_getimagedata. asp https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/ImageData Lưu ý rằng tài liệu MDN nói rằng thuộc tính dữ liệu ở chế độ chỉ đọc, vì vậy tôi không biết liệu nó có hoạt động trên tất cả các trình duyệt hay không Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn tiếng anhĐăng ngày 5 tháng 6 năm 2017 tiếng anh
Đăng ngày 5 tháng 6 năm 2017 Thông thường, cách tiếp cận để tùy chỉnh hình đại diện là có một phiên bản thang độ xám của đối tượng bạn muốn tùy chỉnh và sau đó tô màu cho nó. Sử dụng chế độ hòa trộn nhiều lần với màu hoạt động. Tôi không chắc canvas có những tùy chọn nào để pha màu và hòa trộn, vì vậy tôi sẽ phải kiểm tra tài liệu tham khảo khi có thời gian. Trong trường hợp xấu nhất, hãy tạo một mảng int và nhân các thành phần màu với các thành phần hình ảnh, sau đó thêm nó vào canvas bằng cách sử dụng putImageData() Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 6 tháng 6 năm 2017 Notretsam
Đăng ngày 6 tháng 6 năm 2017
@justsomeguyyeah Hôm nay tôi định xem xét thẻ cụ thể getimagedata. sẽ thật tuyệt nếu bạn có thể sử dụng định dạng #colorcode giống như bạn làm trong css nhưng thật đáng buồn như bạn nói, các giá trị alpha cụ thể của nó mà tôi không biết nhiều về nó. @Ingolme thật thú vị khi thấy một câu hỏi và câu trả lời về sắc độ màu trên stackoverflow ngày hôm qua Tôi cho rằng phải có một cách để phát hiện một #colorcode cụ thể và thay đổi thành một #colorcode khác Một số loại mã như $colorchange = changecol("#000000"); Tôi vẫn đang cố gắng tìm ra các bước mã hóa nhưng tôi tin rằng trước tiên tôi cần thay đổi hình ảnh Áo phông, sau đó sử dụng Canvas để tạo hình đại diện, giống như trò chơi ghép hình đầu + cổ, thân + tay, chân + bàn chân Đó là một dự án lớn và rất khó để tôi thực hiện, vì tôi tự học, vì vậy bất kỳ lời khuyên nào tôi có thể nhận được đều sẽ được đánh giá cao. Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 6 tháng 6 năm 2017 Notretsam
Đăng ngày 6 tháng 6 năm 2017 (đã chỉnh sửa)
OK, sửa cho tôi nếu tôi sai ở đây nhưng tôi tin rằng mã bên dưới tương đương với $rgb(0,0,0,0) , về cơ bản, mã này sẽ lặp lại và thay đổi số thành 0 function getColorData() {
myImage = ctx.getImageData(0, 0, 200, 222);
// Loop through data.
for (var i = 0; i < picLength * 4; i += 4) {
// First bytes are red bytes.
// Remove all red.
myImage.data[i] = 0;
// Second bytes are green bytes.
// Third bytes are blue bytes.
// Fourth bytes are alpha bytes
}
}Vì vậy, để tôi thay đổi màu đỏ, xanh lá cây và xanh dương Tôi cần phát hiện vòng lặp đầu tiên để thay đổi giá trị màu đỏ, sau đó phát hiện vòng lặp thứ hai để thay đổi giá trị màu xanh lục và vòng lặp thứ ba để thay đổi giá trị màu xanh lam? bỏ qua $rgb var, tôi chỉ hiển thị mã màu $rgb của nó. Được chỉnh sửa vào ngày 6 tháng 6 năm 2017 bởi NotretsamLiên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn tiếng anhĐăng ngày 6 tháng 6 năm 2017 tiếng anh
Đăng ngày 6 tháng 6 năm 2017 Có vẻ như canvas không hỗ trợ pha trộn hoặc bất kỳ thứ gì tương tự. Bạn sẽ cần nhiều canvas khác nhau mà sau đó bạn sẽ tổng hợp bằng drawImage() Trước tiên hãy lấy dữ liệu từ hình ảnh nguồn của bạn bằng getImageData(). Tạo dữ liệu hình ảnh mới bằng createImageData(), sau đó lưu nó vào một canvas khác bằng putImageData() Bạn sẽ lấy dữ liệu từ hình ảnh nguồn, hình ảnh này phải có màu trắng với bóng màu xám, nếu nó không phải là màu trắng thì bạn không thể thay đổi màu đúng cách. Sau đó, bạn sẽ chọn một màu mục tiêu. Ví dụ: màu cam (đỏ = 255, lục = 120, lam = 0) Đối với mỗi pixel trong dữ liệu hình ảnh nguồn, hãy nhân thành phần màu đỏ của nguồn với màu đỏ mục tiêu của bạn, xanh lá cây với màu lục mục tiêu và xanh lam với màu xanh lam mục tiêu. Lưu trữ chúng trong dữ liệu hình ảnh đích, sử dụng giá trị alpha từ hình ảnh nguồn Khi đã xong, bạn có thể sử dụng drawImage() để vẽ khung vẽ này lên khung vẽ cuối cùng, pha trộn màu đúng cách với những gì phía sau chúng Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 6 tháng 6 năm 2017 Notretsam
Đăng ngày 6 tháng 6 năm 2017 tôi thực sự xin lỗi Ingolme nhưng bài đăng đó đã khiến tôi mất hoàn toàn Tôi nghĩ có thể bạn nghĩ rằng tôi đã mã hóa đoạn mã mà tôi đã trình bày ở trên, mã thực sự của nó tôi đã tìm thấy trên mạng, tất cả những gì tôi hiểu là những gì tôi đã trình bày trong bài đăng trước của mình. Đó là giá trị màu đỏ đang được thay đổi, nhưng màu xanh lá cây và xanh lam thì không, vì vậy tôi không nhìn thấy màu sắc đang hy vọng. Tôi bắt đầu nghĩ rằng không có cách nào để thực hiện chính xác những gì tôi muốn làm và có thể phải có các hình ảnh khác nhau cho mỗi màu, nhưng tôi muốn tiếp tục khám phá điều này, và xem nó sẽ đưa tôi đến đâu
Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn dsonesukĐăng ngày 6 tháng 6 năm 2017 dsonesuk
Đăng ngày 6 tháng 6 năm 2017 Tôi nghĩ rằng nó có nghĩa là một cái gì đó giống như (lưu ý ví dụ thực sự thô) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Untitled Document</title> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. var myImage2 = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; // Define the source of the image. // This file must be on your machine in the same folder as this web page. myImage.src = "maletshirtMask.png"; myImage2.src = "maletshirtredTrans.png"; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); // Loop through data. Maskcolor = [255, 255, 255]; //white newcolor = [0, 255, 0]; //lime //newcolor = [255, 0, 0]; // red // newcolor = [0, 0, 255]; // navy // newcolor = [255, 255, 255]; for (var i = 0; i < myImage.data.length; i += 4) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); }; } </script> <style> #mask_shadow_wrap {position: relative;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img id="myPhoto" src="maletshirtMask.png" alt=""> <img src="maletshirtredTrans.png" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> </body> </html>
Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn chỉ là một vài anh chàngĐăng ngày 6 tháng 6 năm 2017 chỉ là một vài anh chàng
Đăng ngày 6 tháng 6 năm 2017 Mã màu hex HTML chỉ là các giá trị RGB. Mã hex là 3 byte - một cho màu đỏ, một cho màu xanh lá cây, một cho màu xanh dương, được biểu thị bằng hex thay vì cơ số 10. Vì vậy, đối với màu #1c6618, chẳng hạn, màu đỏ là 0x1c, màu lục là 0x66 và màu xanh dương là 0x18. Bạn có thể chuyển đổi chúng thành cơ số 10 để nhận giá trị từ 0 đến 255 cho mỗi màu. Màu hex HTML không có giá trị alpha, alpha luôn là 255, mờ 100% / trong suốt 0%. Bạn có thể đặt giá trị alpha trong canvas nếu bạn muốn lớp phủ màu trong suốt một phần. Sẽ khá tầm thường nếu viết một hàm lấy mã màu hex và trả về một mảng có các giá trị cơ số 10 R, G và B nếu đó là điều bạn muốn làm Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn tiếng anhĐăng ngày 6 tháng 6 năm 2017 tiếng anh
Đăng ngày 6 tháng 6 năm 2017 Điều đó hoạt động nhưng chỉ đối với một hình ảnh có màu đặc, nó sẽ không có bóng Để có được bóng, bạn phải nhân màu mục tiêu với màu của hình ảnh, nhưng điều này chỉ hoạt động khi mỗi màu được biểu thị dưới dạng giá trị từ 0 đến 1, vì vậy bạn phải tính toán giá trị đó. Đây được gọi là thuật toán trộn. Cái này đặc biệt là thuật toán nhân // Set this to the color you want var newcolor = [ 0xFF, 0, 0 ]; // Convert to unitary value for calculations newcolor[0] = newcolor[0] / 255; newcolor[1] = newcolor[1] / 255; newcolor[2] = newcolor[2] / 255; // For each pixel, multiply the new color with the pixel's existing color var r, g, b; for (var i = 0; i < myImage.data.length; i += 4) { // Get unitary value of the pixel r = myImage.data[i] / 255; g = myImage.data[i+1] / 255; b = myImage.data[i+2] / 255; // Multiply the values and store them myImage.data[i] = Math.floor(255 * r * newcolor[0]); myImage.data[i+1] = Math.floor(255 * r * newcolor[1]); myImage.data[i+2] = Math.floor(255 * r * newcolor[2]); } putImageData() có nhược điểm là ghi đè mọi thứ trong vùng hình chữ nhật của hình ảnh mà bạn đang đặt nó lên, bao gồm cả các giá trị alpha, đây là lý do tại sao tôi khuyên bạn nên đặt nó lên khung vẽ của chính nó, sau đó sử dụng drawImage() để vẽ khung vẽ đó lên mục tiêu Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn dsonesukĐăng ngày 6 tháng 6 năm 2017 dsonesuk
Đăng ngày 6 tháng 6 năm 2017
Hình khẩu trang là hình bên trong của áo phông có màu đồng nhất, nhìn không rõ vì màu trắng, hình còn lại là hình trong suốt chỉ thấy bóng và viền. Ba giá trị cung cấp màu rgb thay đổi hình ảnh mặt nạ, sau đó là hình ảnh bóng/đường viền trong suốt mà nó đặt trên nó Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 có vẻ như mã đó hoạt động khá tốt @dsonesuk cảm ơn rất nhiều vì điều đó https. // đô vật. c7. ixsecure. com/avatar/test4. php có thể xem mã chính xác mà bạn đã hiển thị ở đây trên trang web với hải quân thật đáng buồn là nó áp dụng mặt nạ cho hình ảnh đầy đủ, thậm chí khu vực cổ áo của áo phông và bất kỳ màu bóng nào được sử dụng cũng được thay thế, điều mà tôi nghĩ @Ingolme đang nói đến. Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 OK, vì vậy mã tôi đã hiển thị trong bài đăng gốc, tôi đã thực hiện hai bài kiểm tra Bài kiểm tra đầu tiên ở đây https. // đô vật. c7. ixsecure. com/avatar/kiểm tra. php function getColorData() {
myImage = ctx.getImageData(0, 0, 200, 222);
// Loop through data.
for (var i = 0; i < picLength * 4; i += 4) {
// First bytes are red bytes.
// Remove all red.
myImage.data[i] = 2;
// Second bytes are green bytes.
// Third bytes are blue bytes.
// Fourth bytes are alpha bytes
}
}Thử nghiệm thứ hai lấy một đoạn mã từ mã dsonesuk và kết hợp một phần nhỏ của nó thành mã tôi có. (Cảm ơn justsomeguy về thông tin mã màu) Mã này hoạt động nhưng như bạn có thể thấy, nó không giữ lại vùng cổ áo sơ mi hoặc bất kỳ bóng nào https. // đô vật. c7. ixsecure. com/avatar/test2. php function getColorData() {
myImage = ctx.getImageData(0, 0, 200, 222);
// Loop through data.
for (var i = 0; i < picLength * 4; i += 4) {
// First bytes are red bytes.
// Remove all red.
myImage.data[i] = 0x00;
myImage.data[i + 1] = 0x00;
myImage.data[i + 2] = 0xFF;
// Second bytes are green bytes.
// Third bytes are blue bytes.
// Fourth bytes are alpha bytes
}
}bắt đầu nghĩ rằng không có cách nào để thay đổi chỉ một màu trong ảnh trong khi vẫn giữ lại tất cả các màu gốc khác. Vì vậy, hãy nói Blue/Red , đổi xanh dương thành xanh lục nhưng giữ nguyên màu đỏ một lần nữa, câu trả lời được đánh giá cao. Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn dsonesukĐăng ngày 7 tháng 6 năm 2017 dsonesuk
Đăng ngày 7 tháng 6 năm 2017
Đó là lý do tại sao bạn sử dụng *trans. png có cổ áo, tô bóng, đường khâu để đặt bên trên áo phông đã đổi màu, bạn cũng có thể sử dụng
Màu mặc định để nhắm mục tiêu các màu cụ thể với điều kiện if và thay thế theo nhu cầu của bạn Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 vâng, tôi đang thắc mắc về một hình ảnh lớp đã lưu với bóng, cổ áo và đường khâu. Cần nói chuyện với đối tác kinh doanh của tôi, con gái bạn của anh ấy đã vẽ những hình ảnh cho chúng tôi Tôi vừa nhận ra rằng myimage2src rất có thể là phiên bản chuyển đổi. hình ảnh png mà bạn đang nói đến?
Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 OK đây là mã của bạn và lấy hình ảnh chuyển đổi từ bài viết trước dsonesuk của bạn https. // đô vật. c7. ixsecure. com/avatar/test4. php
Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn dsonesukĐăng ngày 7 tháng 6 năm 2017 dsonesuk
Đăng ngày 7 tháng 6 năm 2017 Như tôi đã nói, nó thô và dường như sáng hơn trên các màu tối, nhưng về lý thuyết, bạn có thể tùy thuộc vào mức độ sáng hơn hoặc tối hơn của màu, điều chỉnh độ tối của bóng, v.v. Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 (đã chỉnh sửa) yup đang bắt đầu xem cách thực hiện việc này, nó có khá nhiều "lớp" , giống như bạn sẽ sử dụng trong chương trình tạo ảnh (photoshop, v.v.) Bạn áp dụng lựa chọn màu sắc trên lớp chính, sau đó áp dụng hiệu ứng hình ảnh lớp trên cùng. Hôm nay tôi đang loay hoay với mã và bây giờ đã thêm PHP vào mã bạn đã làm, điều đó có nghĩa là bây giờ tôi có thể lấy các giá trị màu từ cơ sở dữ liệu mysql. Tôi nghĩ nó vẫn chưa hoàn thành và vẫn để dọn dẹp mã, hãy thay đổi cách hiển thịImage(); . <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <?php $image1 = "maletshirtred.png"; $image2 = "maletshirtredTrans.png"; $tshirtcolred = "0"; $tshirtcolgreen = "0"; $tshirtcolblue = "255"; ?> <form> <input type="hidden" id="mainimage" name="mainimage" value="<?php echo "$image1"; ?>"> <input type="hidden" id="maskimage" name="maskimage" value="<?php echo "$image2"; ?>"> <input type="hidden" id="tshirtcolred" name="tshirtcolred" value="<?php echo "$tshirtcolred"; ?>"> <input type="hidden" id="tshirtcolblue" name="tshirtcolblue" value="<?php echo "$tshirtcolblue"; ?>"> <input type="hidden" id="tshirtcolgreen" name="tshirtcolgreen" value="<?php echo "$tshirtcolgreen"; ?>"> </form> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. var myImage2 = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; // Define the source of the image. // This file must be on your machine in the same folder as this web page. var mainimage = document.getElementById('mainimage').value; var maskimage = document.getElementById('maskimage').value; myImage.src = mainimage; myImage2.src = maskimage; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); // Loop through data. Maskcolor = [255, 255, 255]; //white var tshirtcolred = document.getElementById('tshirtcolred').value; var tshirtcolgreen = document.getElementById('tshirtcolgreen').value; var tshirtcolblue = document.getElementById('tshirtcolblue').value; newcolor = [tshirtcolred , tshirtcolgreen, tshirtcolblue]; for (var i = 0; i < myImage.data.length; i += 4) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); }; } </script> <style> #mask_shadow_wrap {position: relative;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} .mphotozz img { display:none; } </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img src="<?php echo "$image2"; ?>" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> </body>
Được chỉnh sửa vào ngày 7 tháng 6 năm 2017 bởi Notretsam Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 7 tháng 6 năm 2017 Notretsam
Đăng ngày 7 tháng 6 năm 2017 https. // đô vật. c7. ixsecure. com/avatar/test5. php Đây là trang thử nghiệm đang hoạt động, chỉ cần tìm ra cách lấy giá trị rgb của màu đã chọn ngay bây giờ. Giống như điều này, nhưng rất tiếc là không thể làm việc hôm nay https. //www. w3schools. com/colors/colors_converter. asp Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn dsonesukĐăng ngày 8 tháng 6 năm 2017 dsonesuk
Đăng ngày 8 tháng 6 năm 2017 (đã chỉnh sửa) Ví dụ về hai giai điệu, quá trình tải trong các hình ảnh/s chức năng gây ra sự cố thay đổi vì nó đã được thông qua để kích hoạt các thay đổi, vì vậy để khắc phục điều đó dưới dạng hack, tôi buộc phải tải lại <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Untitled Document</title> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage; var myImage2; // Create a new blank image. var newcolor = []; var newcolor2 = []; var r, g, b, rtone, gtone, btone; // Load the image and display it. function dothis() { location.reload(); } function displayImage() { // Create a new blank image. // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { myImage = new Image(); myImage.src = "ColourApplTShirt2.png"; // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); r = document.getElementById("red"); g = document.getElementById("green"); b = document.getElementById("blue"); rtone = document.getElementById("red2"); gtone = document.getElementById("green2"); btone = document.getElementById("blue2"); Maskcolor = [255, 255, 255]; //white if (parseInt(r.value) === 255 && parseInt(g.value) === 255 && parseInt(b.value) === 255 && parseInt(rtone.value) === 255 && parseInt(gtone.value) === 255 && parseInt(btone.value) === 255) { newcolor = Maskcolor; newcolor2 = Maskcolor; } else { newcolor[0] = parseInt(r.value); newcolor[1] = parseInt(g.value); newcolor[2] = parseInt(b.value); newcolor2[0] = parseInt(rtone.value); newcolor2[1] = parseInt(gtone.value); newcolor2[2] = parseInt(btone.value); } for (var i = 0; i < myImage.data.length; i += 4) { if (myImage.data[i] == 255 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } if (myImage.data[i] == 0 && myImage.data[i + 1] == 255 && myImage.data[i + 2] == 255) { myImage.data[i] = newcolor2[0]; myImage.data[i + 1] = newcolor2[1]; myImage.data[i + 2] = newcolor2[2]; } } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2 = new Image(); myImage2.src = "trans3.png"; myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); myImage2 = ctx.getImageData(0, 0, picWidth, picHeight); }; } </script> <style> #mask_shadow_wrap {position: relative; display: none;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img id="myPhoto" src="ColourApplTShirt2.png" alt=""> <img src="trans3.png" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> <p>Main colour</p> <input id="red" type="number" name="r" min="0" max="255" value="255"> <input id="green" type="number" name="g" min="0" max="255" value="255"> <input id="blue" type="number" name="b" min="0" max="255" value="255"> <p>Chest stripe colour</p> <input id="red2" type="number" name="r2" min="0" max="255" value="255"> <input id="green2" type="number" name="g2" min="0" max="255" value="255"> <input id="blue2" type="number" name="b2" min="0" max="255" value="255"> <p></p> <button onclick="dothis()">Change t-shirt chest stripe</button> </body> </html>
Liên kết để bình luậnChia sẻ trên các trang web khácNhiều tùy chọn chia sẻ hơn NotretsamĐăng ngày 8 tháng 6 năm 2017 Notretsam
Đăng ngày 8 tháng 6 năm 2017 Đã thực hiện một giải pháp chọn màu hoàn toàn hiệu quả trên trang thử nghiệm này https. // đô vật. c7. ixsecure. com/avatar/test5. php Tôi rất hài lòng với điều này, vẫn còn rất nhiều việc phải làm trên hệ thống hình đại diện, nhưng đây là một khởi đầu rất tốt. cảm ơn bạn rất nhiều @dsonesuk , cũng xin trân trọng thời gian của bạn @justsomeguy và @Ingolme 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 của hình ảnh?Cách thay đổi màu của hình ảnh trong 4 bước . Tải ảnh lên hoặc kéo và thả ảnh vào trình chỉnh sửa ở định dạng JPG hoặc PNG Nhấp vào Hiệu ứng hình ảnh & Bộ lọc từ menu phía trên hình ảnh của bạn Chọn một màu cụ thể bằng công cụ Tint và điều chỉnh thanh trượt để kiểm soát cường độ màu Làm cách nào để thay đổi màu nền của hình ảnh trong JavaScript?Để thay đổi màu nền bằng javascript, bạn có thể áp dụng kiểu. nền hoặc phong cách. màu nền của thành phần bạn muốn thay đổi nền cho . Ví dụ dưới đây thay đổi màu nền của phần thân khi bạn nhấp vào một phần tử bằng cách sử dụng kiể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. |
