JQuery에서 이미지의 일부분을 변경하는 방법이 있습니까?

이미지가있는 경우 (jpg, png, gif .doesn't) 정말로 이미지의 일부 자바 스크립트 코드 변경 부분이 필요합니다.JQuery에서 이미지의 일부분을 변경하는 방법이 있습니까?

예를 들어 i have this picture of a cookie like here이라고 말하면됩니다.

저는 사람이 색상을 선택할 수있게 해주는 색상 선택 도구가 있습니다. 이미지의 일부 색상 (이 경우 초콜릿 칩의 색상을 말하게 함)을 선택한 색상으로 변경하고 싶습니다.

은 javascript/jquery에서 할 수 있습니까?

2011-09-03 leora

html5가 아님. 이미지 클라이언트 측의 내용에 액세스하는 유일한 방법은

절대 또는 상대 위치 지정을 통해 서로 겹쳐진 PNG 파일로 무언가를 할 수 있습니다. 예를 들어, 쿠키는 반투명 한 칩의 일부 "구멍"을 제외하고는 대부분 어두운 색의 갈색 배경을 드러내는 것을 제외하고는 대부분 불투명 한 하나의 PNG입니다. 그런 다음 사용자가 "더 진한 초콜릿 칩"을 골랐다면 배경색을 검정색으로 변경하면됩니다. 또는 쿠키가 모두 불투명하고 "초콜릿 칩"이 위에있는 별도의 이미지입니다. – selbie

@selbie - 포토샵 등을 사용하여 칩을 별도의 이미지 나 레이어로 "추출"하는 방법을 알고 계십니까? – leora

픽셀 데이터를 직접 조작하여 Javascript 및 canvas 요소에서 가능합니다. 아래 예제는 파란색을 빨간색으로 바꿉니다.

Live Demo

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    image = document.getElementById("testImage"); 

canvas.height = canvas.width = 45; 
ctx.drawImage(image,0,0); 

var imgd = ctx.getImageData(0, 0, 45, 45), 
    pix = imgd.data; 

for (var i = 0, n = pix.length; i <n; i += 4) { 
    if(pix[i + 2] > 20){ // Blue threshold 
     // Swap red and blue component values. 

     var redVal = pix[i]; // Copy the current red component value 
     pix[i] = pix[i + 2]; // Assign the current blue component value to red 
     pix[i+2] = redVal; // Assign the old red value to blue. 
    } 
} 

ctx.putImageData(imgd, 0, 0);

그것의 매우 빠른없는이 방법 그러나 그것을 할, 큰 이미지는 브라우저에 따라 성능이 현저하게 감소 할 것이다. jQuery의 경우 jQuery가 제공하는 것과 관련하여 이와 관련이 없습니다.

출처

2011-09-03 01:45:26 Loktar

그게 greate 예를 사용하는 데 도움이 필요합니다. jquery에서 내가 입을 감지하면 색 이빨을 어떻게 바꿀 수 있습니까? 나는 susscessfully 입의 모든 픽셀을 얻을. 어떻게 색을 단지 바꿀 수 있습니다. –

JQuery에서 이미지의 일부분을 변경하는 방법이 있습니까?

답변

관련 문제