我想创建一个HTML select列表，我可以选择在混合两个globalCompositeOperation元素时应用哪种类型的canvas，如下所示：
<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元素，而不是手动填充它？这些信息是否存储在一些原生变量中？
我不想仅仅验证用户浏览器是否支持某种混合模式，如here所述。我想获得支持的globalCompositeOperation类型的完整列表，以便在浏览器中选择混合模式。
答案 0 :(得分：5)
没有没有本地属性告诉我们浏览器支持的globalCompositeOperation模式
你必须通过循环遍历所有规范定义的那些来测试它，并检查它是否仍然是你刚刚设置的那个：
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"和{{1模式，但实际上并不支持它......
所以在这里我做了一个测试不同模式的功能 这个想法是将两个填充了纯色的3x3px画布绘制到第三个画布上。第一个绘制在左上角，第二个绘制在左下角，每个都在第三个画布的中心像素中共享一个像素。
显然这比属性检查慢，但每页只需要一次，因此性能可能不是问题。
"luminosity""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(' ');
答案 1 :(得分：2)
我刚刚将Kaiido的解决方案转换为带有公共 test（blendModeName）方法的js对象。也许对某人有用。
// based on http://stackoverflow.com/questions/33955992/js-how-to-get-list-of-supported-html-canvas-globalcompositeoperation-types
function BlendModeTester () {
var ctx1, c1, ctx2, c2, ctx3, c3;
var pos;
var em, d1, d2;
var blendModeDefinition = {
"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]
};
this.initialize = function () {
// create two 3*3 canvases that will be used as layers
c1 = document.createElement('canvas');
c1.width = c1.height = 3;
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 correspond to the values in the blendModeDefinition array
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
pos = [16, 0, 32];
}
this.test = function(blendModeName) {
var i;
// get the array corresponding to the actual key
var arr = blendModeDefinition[blendModeName];
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 blend mode
ctx3.globalCompositeOperation = blendModeName;
// 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 blend mode "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 blendModeTester = new BlendModeTester();
blendModeTester.initialize();
if(blendModeTester.test('hue')) {
// do stuff
};