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
src/ol/style/IconImage.js
+17 -23
View File
@@ -232,37 +232,31 @@ class IconImage extends EventTarget {
ctx.scale(pixelRatio, pixelRatio); ctx.scale(pixelRatio, pixelRatio);
ctx.drawImage(this.image_, 0, 0); ctx.drawImage(this.image_, 0, 0);
if (this.isTainted_()) { ctx.globalCompositeOperation = 'multiply';
// If reading from the canvas throws a SecurityError the same effect can be // Internet Explorer 11 does not support the multiply operation.
// achieved with globalCompositeOperation. // If the canvas is tainted in Internet Explorer this still produces
// This could be used as the default, but it is not fully supported by all // a solid color image with the shape of the icon.
// browsers. E. g. Internet Explorer 11 does not support the multiply if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
// 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.
const c = this.color_; const c = this.color_;
ctx.globalCompositeOperation = 'multiply';
ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')'; ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'destination-in'; ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(this.image_, 0, 0); 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); for (let i = 0, ii = data.length; i < ii; i += 4) {
const data = imgData.data; data[i] *= r;
const r = this.color_[0] / 255.0; data[i + 1] *= g;
const g = this.color_[1] / 255.0; data[i + 2] *= b;
const b = this.color_[2] / 255.0; }
ctx.putImageData(imgData, 0, 0);
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);
} }
/** /**