JS:如何获取支持的 HTML 画布 globalCompositeOperation 类型的列表

问题描述

我想制作一个 HTML select 列表，我可以使用它来选择在混合两个 canvas 元素时应用哪种类型的 globalCompositeOperation，像这样:

I want to make a HTML select list, with which I can choose which type of globalCompositeOperation will be applied when blending two canvas elements, like this:

<select name="blending-modes" id="blending-modes">
    <option value="source-over">source-over</option>
    <option value="source-in">source-in</option>
    <option value="source-out">source-out</option>
    ...
</select>

有没有办法以编程方式获取可用 globalCompositeOperation 类型列表作为 Javascript 对象或数组，因此它可以用于用数据填充 select 元素，而不是手动填写?这些信息是否存储在某个本机变量中?

Is there a way to programatically get list of available globalCompositeOperation types as a Javascript object or array, so it could be used to populate select element with data, instead of filling it manually? Is this information stored in some native variable?

我不想只是验证用户的浏览器是否支持某些混合模式，如此处所述.我想获取支持的 globalCompositeOperation 类型的完整列表，以便在浏览器中选择混合模式.

I do not want to just verify whether or not some blending mode is supported by user's browser, as discussed here. I want to get a full list of supported globalCompositeOperation types in order to chose blending mode in a browser.

推荐答案

没有原生属性告诉我们浏览器支持哪些 globalCompositeOperation 模式.
您必须通过遍历所有规范定义的来测试它，并检查它是否仍然是您刚刚设置的:

No there is no native property telling us which are the globalCompositeOperation modes that the browser supports.
You'll have to test it by looping through all spec defined ones, and check if it is still the one you just set :

function getGCOModes() {
  var gCO = ["source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
  var ctx = document.createElement('canvas').getContext('2d');
  return gCO.filter(function(g) {
    ctx.globalCompositeOperation = g;
    return ctx.globalCompositeOperation === g;
  });
}

var supportedGCO = getGCOModes();

log.innerHTML = supportedGCO.join(' ');

<p id="log"></p>

但有一个警告/错误，因为 Safari _{(至少 9.0.1)} 确实接受 "hue", "saturation", "color" 和 "luminosity"" 模式，但实际上并不支持...

But there is one caveat / bug because Safari _{(at least 9.0.1)} does accept the "hue", "saturation", "color" and "luminosity"" modes, but doesn't actually support it...

所以我在这里做了一个函数来测试不同的模式.
这个想法是在第三个上绘制两个填充纯色的 3x3px 画布.第一个绘制在左上角，第二个绘制在左下角，它们每个都共享第三个画布的中心像素中的一个像素.

So here I made a function to test the different modes.
The idea is to draw two 3x3px canvases filled with a solid color onto a third one. The first one is painted in the top-left corner and the second one in the bottom-left, each of them sharing a pixel in the central pixel of the third canvas.

显然这比属性检查要慢，但您应该每页只需要一次，因此性能可能不是问题.

Obviously this is slower than the property check, but you should only need it once per page so performance might not be an issue.

function testGCOModes() {
  // In this object are stored the pixels as they should appear at the 3 positions we'll look : 
  // 0 is an empty pixel
  // 1 is the first pixel drawn
  // 2 is the second pixel drawn
  // 3 is none of the above (blending)
  // We'll look to the central pixel first since it is the most likely to change
  var gCO = {
    "source-over": [2, 1, 2],
    "source-in": [2, 0, 0],
    "source-out": [0, 0, 2],
    "source-atop": [2, 1, 0],
    "destination-over": [1, 1, 2],
    "destination-in": [1, 0, 0],
    "destination-out": [0, 1, 0],
    "destination-atop": [1, 0, 2],
    "lighter": [3, 1, 2],
    "copy": [2, 0, 2],
    "xor": [0, 1, 2],
    "multiply": [3, 1, 2],
    "screen": [3, 1, 2],
    "overlay": [3, 1, 2],
    "darken": [1, 1, 2],
    "color-dodge": [3, 1, 2],
    "color-burn": [3, 1, 2],
    "hard-light": [3, 1, 2],
    "soft-light": [3, 1, 2],
    "difference": [3, 1, 2],
    "exclusion": [3, 1, 2],
    "hue": [3, 1, 2],
    "saturation": [3, 1, 2],
    "color": [3, 1, 2],
    "luminosity": [3, 1, 2]
  };
  // create two 3*3 canvases that will be used as layers
  var c1 = document.createElement('canvas');
  c1.width = c1.height = 3;
  var c2 = c1.cloneNode(true),
    // the third one will be the tester
    c3 = c1.cloneNode(true),

    ctx1 = c1.getContext('2d'),
    ctx2 = c2.getContext('2d'),
    ctx3 = c3.getContext('2d');
  // fill our canvases with solid colors
  ctx1.fillStyle = 'green';
  ctx1.fillRect(0, 0, 3, 3);
  ctx2.fillStyle = 'pink';
  ctx2.fillRect(0, 0, 3, 3);
  // get the image data of one pixel that will corresponds to the values in gCO's arrays
  var em = [0, 0, 0, 0], // 0 or empty
    d1 = ctx1.getImageData(0, 0, 1, 1).data, // 1 
    d2 = ctx2.getImageData(0, 0, 1, 1).data; // 2
  // the positions of the pixels in our imageData 
  // again, start with the central one
  var pos = [16, 0, 32];

  // make an array of all our gCOs
  var keys = Object.keys(gCO);
  return keys.filter(function(g) {
    var i;
    // get the array corresponding to the actual key
    var arr = gCO[g];

    var layer = [];
    // get the correct imageData for each layer we should find
    for (i = 0; i < 3; i++) {
      switch (arr[i]) {
        case 0:
          layer[i] = em;
          break;
        case 1:
          layer[i] = d1;
          break;
        case 2:
          layer[i] = d2;
          break;
        case 3:
          layer[i] = null;
          break;
      }
    }
    // first reset the canvas
    ctx3.globalCompositeOperation = 'source-over';
    ctx3.clearRect(0, 0, 3, 3);
    // draw the first layer in the top-left corner
    ctx3.drawImage(c1, -1, -1);
    // set the current gCO
    ctx3.globalCompositeOperation = g;
    // draw the second layer in the top-right corner so it comes over it
    ctx3.drawImage(c2, 1, 1);
    // get the image data of our test canvas
    var d3 = ctx3.getImageData(0, 0, 3, 3).data;
    // we will first admit that it is supported;
    var tempResult = true;
    // iterate through the 3 positions (center, top-left, bottom-right)
    for (i = 0; i < pos.length; i++) {
      // we know what it should return
      if (layer[i] !== null) {
        // is it the same pixel as expected ?
        tempResult = d3[pos[i]] === layer[i][0] &&
          d3[pos[i] + 1] === layer[i][1] &&
          d3[pos[i] + 2] === layer[i][2] &&
          d3[pos[i] + 3] === layer[i][3];
      }
      // some blending operation
      else {
        // is it different than the last drawn layer ? 
        //(if the mode is not supported, the default gCO "source-over" will be used)
        tempResult = d3[pos[i]] !== d2[0] || d3[pos[i] + 1] !== d2[1] || d3[pos[i] + 2] !== d2[2] || d3[pos[i] + 3] !== d2[3];
      }
      // our flag switched to false
      if (!tempResult)
      // no need to go to the other pixels, it's not supported
        return false;
    }
    // this mode is supported
    return true;
  });
}
var supportedGCO = testGCOModes();
log.innerHTML = supportedGCO.join(' ');

<p id="log"></p>

这篇关于JS:如何获取支持的 HTML 画布 globalCompositeOperation 类型的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！