Как сделать черную часть фонового изображения прозрачной?

Question

Вот результат я хочу realize.As будет показано, QR-код состоит из черного и белого, но я хочу, чтобы черная часть должна быть прозрачной, с тем, чтобы смешаться с фоном снаружи. Внешний фон может меняться, он не всегда зеленый.

Я пытался использовать фоновый режим смешивания с 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, где указанный цвет станет прозрачным. Однако для этого потребуется немного больше логики для цветов, похожих на ту, которую вы указали.В качестве альтернативы вы можете реализовать это как шейдер, чтобы обработка была более эффективной, переместив ее на GPU вместо CPU.

Answer 2

У вас есть правильный режим смешивания, и я предполагаю, что URL-адрес фонового изображения опущен специально, поэтому первая причина, по которой я буду обращаться, - совместимость браузера. Для этого, например, посмотрите на compatibility chart on caniuse.com.

Я предлагаю использовать прозрачный PNG здесь, так как это именно то, для чего он предназначен. Даже если вы заработаете background-blend-mode, если фон не является абсолютно черным (что означает № 000) - глядя на ваш пример изображения, это не так, поэтому вы не получите эффект, который вы хотите так или иначе.

Другой вопрос, я могу думать о том, что вы, вероятно, хотите, что QR-код, как и в img элемент, по следующим причинам:

• пользователь может захотеть, чтобы сохранить изображение в запланированном пути
• фоновые изображения не отображаются в виде элементов блока, поэтому в зависимости от вашего макета они могут быть легко перекрыты.
• Фоновые изображения часто отбрасываются при печати страниц, поэтому их нельзя использовать для контента
• Устройства чтения с экрана, вероятно, будут игнорировать б ackgound изображения, предполагая, что они просто дизайн