ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use compositing operation for icon colorization when possible.

Browse Source
This commit is contained in:
Maximilian Krög
2020-03-27 20:38:53 +01:00
parent 82328fe2c1
commit 38ecaa9814
1 changed files with 17 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/ol/style/IconImage.js
View File

@@ -232,37 +232,31 @@ class IconImage extends EventTarget {
ctx.scale(pixelRatio, pixelRatio);
ctx.drawImage(this.image_, 0, 0);
if (this.isTainted_()) {
// If reading from the canvas throws a SecurityError the same effect can be
// achieved with globalCompositeOperation.
// This could be used as the default, but it is not fully supported by all
// browsers. E. g. Internet Explorer 11 does not support the multiply
// operation and the resulting image shape will be completelly filled with
// the provided color.
// So this is only used as a fallback. It is still better than having no icon
// at all.
ctx.globalCompositeOperation = 'multiply';
// Internet Explorer 11 does not support the multiply operation.
// If the canvas is tainted in Internet Explorer this still produces
// a solid color image with the shape of the icon.
if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
const c = this.color_;
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(this.image_, 0, 0);
return;
}
} else {
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
const r = this.color_[0] / 255.0;
const g = this.color_[1] / 255.0;
const b = this.color_[2] / 255.0;
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
const r = this.color_[0] / 255.0;
const g = this.color_[1] / 255.0;
const b = this.color_[2] / 255.0;
for (let i = 0, ii = data.length; i < ii; i += 4) {
data[i] *= r;
data[i + 1] *= g;
data[i + 2] *= b;
for (let i = 0, ii = data.length; i < ii; i += 4) {
data[i] *= r;
data[i + 1] *= g;
data[i + 2] *= b;
}
ctx.putImageData(imgData, 0, 0);
}
ctx.putImageData(imgData, 0, 0);
}
/**