我们如何对 canvas (javascript) 中使用的图案图像进行灰度化
how can we grayscale a pattern image used in canvas (javascript)
创建了一个圆形上下文并添加了图案图像以填充circle.how我可以使该图案图像灰度化吗?
有什么想法可以帮助我吗?
代码:
ctx.beginPath();
var bg = new Image();
bg.src = image;
bg = function() {
var pattern = ctx.createPattern(this, "no-repeat");
ctx.fillStyle = pattern;
};
ctx.moveTo(canvasCenterHoriz, canvasCenterVert);
ctx.arc(x, y, radius, startAngle, endAngle, direction);
ctx.lineWidth = 0;
ctx.fill();
这可能不是最好的方法,但它非常简单而且有效。
我在下面附上了一个工作示例。它是这样工作的:
图案图像是在不可见的情况下绘制的canvas。图像加载后,将在 canvas 上绘制,白色覆盖和饱和度设置为全局合成操作。 canvas 现在将包含您的图案的灰度版本。
然后将临时 canvas 转换为图像,其源设置为 canvas 数据 url。也许有更好的方法在两个 canvas 之间发送图像数据,但我还没有找到。
图案完成后,您的原始圆弧将使用新图案绘制。
let canvas = document.getElementById('grayscale-canvas');
let ctx = canvas.getContext('2d');
function makeGrayscaleBackground(image, onready) {
var bg = new Image();
bg.src = image;
bg.onload = function() {
// Create a canvas that's not attached to the DOM
var canvas = document.createElement('canvas');
canvas.setAttribute('width', this.width);
canvas.setAttribute('height', this.height);
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');
// Draw the background image
ctx.drawImage(this, 0, 0);
// Then draw a white layer on top, with the saturation composite operation
// which will remove the color from the underlying image
ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, this.width, this.height);
onready(canvas);
};
}
function drawWithImage(image) {
makeGrayscaleBackground(image, function(patternImage) {
// Green background
ctx.fillStyle = "#3f9";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Make a repeating pattern with image we created
var pattern = ctx.createPattern(patternImage, "repeat");
// Make an arc with the pattern
let x = y = canvas.width/2;
ctx.fillStyle = pattern;
ctx.beginPath();
ctx.arc(x, y, canvas.width/2-10, 0, 2*Math.PI);
ctx.fill();
})
}
// Example pattern image
// For security reasons, the image needs to be hosted on the same server as the script!
var bgImage = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
drawWithImage(bgImage);
document.getElementById('bg').src = bgImage;
<canvas width="150" height="150" id="grayscale-canvas"></canvas><br>
Actual background image: <img id="bg"><br>
Modified background image:
创建了一个圆形上下文并添加了图案图像以填充circle.how我可以使该图案图像灰度化吗? 有什么想法可以帮助我吗?
代码:
ctx.beginPath();
var bg = new Image();
bg.src = image;
bg = function() {
var pattern = ctx.createPattern(this, "no-repeat");
ctx.fillStyle = pattern;
};
ctx.moveTo(canvasCenterHoriz, canvasCenterVert);
ctx.arc(x, y, radius, startAngle, endAngle, direction);
ctx.lineWidth = 0;
ctx.fill();
这可能不是最好的方法,但它非常简单而且有效。
我在下面附上了一个工作示例。它是这样工作的:
图案图像是在不可见的情况下绘制的canvas。图像加载后,将在 canvas 上绘制,白色覆盖和饱和度设置为全局合成操作。 canvas 现在将包含您的图案的灰度版本。
然后将临时 canvas 转换为图像,其源设置为 canvas 数据 url。也许有更好的方法在两个 canvas 之间发送图像数据,但我还没有找到。
图案完成后,您的原始圆弧将使用新图案绘制。
let canvas = document.getElementById('grayscale-canvas');
let ctx = canvas.getContext('2d');
function makeGrayscaleBackground(image, onready) {
var bg = new Image();
bg.src = image;
bg.onload = function() {
// Create a canvas that's not attached to the DOM
var canvas = document.createElement('canvas');
canvas.setAttribute('width', this.width);
canvas.setAttribute('height', this.height);
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');
// Draw the background image
ctx.drawImage(this, 0, 0);
// Then draw a white layer on top, with the saturation composite operation
// which will remove the color from the underlying image
ctx.globalCompositeOperation = "saturation";
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, this.width, this.height);
onready(canvas);
};
}
function drawWithImage(image) {
makeGrayscaleBackground(image, function(patternImage) {
// Green background
ctx.fillStyle = "#3f9";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Make a repeating pattern with image we created
var pattern = ctx.createPattern(patternImage, "repeat");
// Make an arc with the pattern
let x = y = canvas.width/2;
ctx.fillStyle = pattern;
ctx.beginPath();
ctx.arc(x, y, canvas.width/2-10, 0, 2*Math.PI);
ctx.fill();
})
}
// Example pattern image
// For security reasons, the image needs to be hosted on the same server as the script!
var bgImage = "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7";
drawWithImage(bgImage);
document.getElementById('bg').src = bgImage;
<canvas width="150" height="150" id="grayscale-canvas"></canvas><br>
Actual background image: <img id="bg"><br>
Modified background image: