배경 이미지의 검은 색 부분을 투명하게 만드는 방법은 무엇입니까?

Question

는 여기에서 QR 코드는 흑백으로 구성 I가 표시됩니다 realize.As에 원하는 결과지만, 나는 외부의 배경과 조화되도록 검은 부분이 투명하게합니다. 바깥의 배경이 바뀔 수도 있습니다. 항상 녹색이 아닙니다.

나는 다음과 같은 CSS와 배경 혼합 모드를 사용하도록 시도했다 :

background-image: url(''); 
background-color: rgba(0,0,0,0); 
background-blend-mode: screen; 

그것은 아무것도하지 않습니다.

도움이 필요하시면 Thx.

Answer 1

실제로이 효과는 canvas pixel manipulation을 통해 얻을 수 있지만 다른 사용자는 이미지 편집 프로그램을 통해 이미지를 투명하게 만드는 것이 더 간단 할 것이라고 말했습니다.

나는 fiddle here에서 이것을 달성하는 방법의 예를 만들었습니다.

이 코드가 처음 수행하는 것은 이미지 요소 <img id="code" src="url.png">을 검색하고 캔버스 개체를 구성하고 context.drawImage 호출을 통해 이미지의 내용을 캔버스에 그립니다.

// Get the image element. 
var el = document.getElementById('code'); 

// Create a canvas and set its width and height. 
var canvas = document.createElement('canvas'); 
canvas.setAttribute('width', 250); 
canvas.setAttribute('height', 250); 

// Get the canvas drawing context, and draw the image to it. 
var context = canvas.getContext('2d'); 
context.drawImage(el, 0, 0, canvas.width, canvas.height); 

다음,

// Get the canvas image data. 
var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 

// Create a function for preserving a specified colour. 
var preserveColor = function(imageData, color) { 
    // Get the pixel data from the source. 
    var data = imageData.data; 
    // Iterate through all the pixels. 
    for (var i = 0; i < data.length; i += 4) { 
     // Check if the current pixel should have preserved transparency. This simply compares whether the color we passed in is equivalent to our pixel data. 
     var preserve = data[i] === color.r 
      && data[i + 1] === color.g 
      && data[i + 2] === color.b 
      && data[i + 3] === color.a; 

     // Either preserve the initial transparency or set the transparency to 0. 
     data[i + 3] = preserve ? data[i + 3] : 0; 
    } 
    return imageData; 
}; 

// Get the new pixel data and set it to the canvas context. 
var newData = preserveColor(imageData, {r: 255, g: 255, b: 255, a: 255}); 
context.putImageData(newData, 0, 0); 

마지막으로, 우리는 document.body.appendChild(canvas);를 사용하여 우리의 페이지에 요소를 추가 할 수 있습니다. 또는 원본 이미지 요소를 캔버스로 완전히 대체 할 수 있습니다.

분명히 픽셀 데이터 반복은 매우 느릴 수 있고 큰 이미지 크기로만 증가하기 때문에 이것은 이상적인 솔루션이 아닙니다. preserveColor 기능을 쉽게 변경하여 지정된 색이 투명 해지는 makeTransparent과 반대로 수행 할 수도 있습니다. 그러나 이렇게하려면 지정한 색상과 비슷한 색상의 논리가 약간 더 필요합니다.또는 이것을 셰이더 (shader)로 구현하여 CPU 대신 GPU로 이동하여 처리가보다 효율적으로 수행되도록 할 수 있습니다.

Answer 2

올바른 블렌드 모드가 있으며 배경 이미지 URL이 의도적으로 생략되었다고 가정하므로 가장 먼저 브라우저 호환성을 고려해야합니다. 이를 위해 compatibility chart on caniuse.com을 예로 들어 보겠습니다.

여기에 투명한 PNG를 사용하는 것이 좋습니다. 그게 정확히 무엇을위한 것입니까? background-blend-mode이 작동하더라도 백그라운드가 완전히 검은 색 (# 000을 의미)이 아닌 한 - 예제 이미지를 보면 그럴 수는 없으므로 원하는 효과를 얻지 못할 것입니다.

내가 여기 생각할 수있는 또 다른 문제는 당신이 아마 원하는입니다 img 요소로, 다음과 같은 이유로 QR 코드 :

는

• 사용자가 의도 한 방식으로 이미지를 저장 할 수 있습니다
• 배경 이미지는 블록 요소로 렌더링되지 않으므로 레이아웃에 따라 쉽게 겹칠 수 있습니다.
• 페이지를 인쇄 할 때 배경 이미지가 종종 버려지므로 내용에 사용하면 안됩니다.
• 화면 판독기에서 무시할 가능성이 높습니다. 비 ackgound 이미지는 단지 디자인이라고 가정합니다.