使用 canvas html5 为图像绘制线条轮廓

Question

我正在尝试为 x 轴作为图像上线条的长度和 y 轴绘制沿线条长度的强度值的图像的强度剖面。 我如何在 html 5 canvas 上执行此操作？ 我尝试了下面的代码，但没有得到正确的强度值。 不知道我哪里错了。

private getLineIntensityVals = function (lineObj, img) {
 const slope = this.calculateSlopeOfLine(lineObj.upPos, lineObj.downPos);
 const intercept = this.calculateIntercept(lineObj.downPos, slope);
 const ctx = img.getContext('2d');
 const coordinates = [];
 const intensities = [];
 for (let x = lineObj.downPos.x; x <= lineObj.upPos.x; x++) {
  const y = slope * x + intercept;
  const pixelData = ctx.getImageData(x, y, 1, 1).data;
  pixelData[0] = 255 - pixelData[0];
  pixelData[1] = 255 - pixelData[1];
  pixelData[2] = 255 - pixelData[2];
  const intensity = ((0.299 * pixelData[0]) + (0.587 * pixelData[1]) + (0.114 * pixelData[2]));
  intensities.push(intensity);
 }
 return intensities;
};

private calculateSlopeOfLine = function (upPos, downPos) {
 if (upPos.x === downPos.x || upPos.y === downPos.y) {
  return null;
 }
 return (downPos.y - upPos.y) / (downPos.x - upPos.x);
};

private calculateIntercept = function (startPoint, slope) {
  if (slope === null) {
   return startPoint.x;
  }
  return startPoint.y - slope * startPoint.x;
};

private calculateLineLength(line) {
  const dim = {width: Math.abs(line.downPos.x -line.upPos.x),height:Math.abs(line.downPos.y- line.upPos.y)};
  length = Math.sqrt(Math.pow(dim.width, 2) + Math.pow(dim.height, 2));
  return length;
};

Answer 1

图像数据

不要一次获取一个像素的图像数据。 获得对像素数据的访问是昂贵的（CPU 周期），而 memory 是便宜的。 一次获取所有像素并重复使用该数据。

数据采样

大多数线条不会均匀地适合像素。 要解决将线分成你想要的样本数（你可以使用线长）

然后步进每个样本依次获取4个相邻像素值并在样本点处插值颜色。

在进行插值时，我们需要确保不会使用错误的颜色 model。在本例中，我们使用 sRGB。

我们因此得到 function

// imgData is the pixel date
// x1,y1 and x2,y2 are the line end points
// sampleRate is number of samples per pixel
// Return array 3 values for each sample.
function getProfile(imgData, x1, y1, x2, y2, sampleRate) {

    // convert line to vector
    const dx = x2 - x1;
    const dy = y2 - y1;

    // get length and calculate number of samples for sample rate
    const samples = (dx * dx + dy * dy) ** 0.5 * Math.abs(sampleRate) + 1 | 0;

    // Divide line vector by samples to get x, and y step per sample
    const nx = dx / samples;
    const ny = dy / samples;

    const w = imgData.width;
    const h = imgData.height;
    const pixels = imgData.data;
    const values = [];

    // Offset line to center of pixel
    var x = x1 + 0.5;
    var y = y1 + 0.5;
    var i = samples;

    while (i--) { // for each sample

        // make sure we are in the image
        if (x >= 0 && x < w - 1 && y >= 0 && y < h - 1) {

            // get 4 closest pixel indexes
            const idxA = ((x | 0) + (y | 0) * w) * 4;
            const idxB = ((x + 1 | 0) + (y | 0) * w) * 4;
            const idxC = ((x + 1 | 0) + (y + 1 | 0) * w) * 4;
            const idxD = ((x | 0) + (y + 1 | 0) * w) * 4;

            // Get channel data using sRGB approximation
            const r1 = pixels[idxA] ** 2.2;
            const r2 = pixels[idxB] ** 2.2;
            const r3 = pixels[idxC] ** 2.2;
            const r4 = pixels[idxD] ** 2.2;

            const g1 = pixels[idxA + 1] ** 2.2;
            const g2 = pixels[idxB + 1] ** 2.2;
            const g3 = pixels[idxC + 1] ** 2.2;
            const g4 = pixels[idxD + 1] ** 2.2;

            const b1 = pixels[idxA + 2] ** 2.2;
            const b2 = pixels[idxB + 2] ** 2.2;
            const b3 = pixels[idxC + 2] ** 2.2;
            const b4 = pixels[idxD + 2] ** 2.2;

            // find value at location via linear interpolation
            const xf = x % 1;
            const yf = y % 1;

            const rr = (r2 - r1) * xf + r1;
            const gg = (g2 - g1) * xf + g1;       
            const bb = (b2 - b1) * xf + b1;       

            /// store channels as uncompressed sRGB
            values.push((((r3 - r4) * xf + r4) - rr) * yf + rr);
            values.push((((g3 - g4) * xf + g4) - gg) * yf + gg);
            values.push((((b3 - b4) * xf + b4) - bb) * yf + bb);  
        } else {
            // outside image
            values.push(0,0,0);
        }
        // step to next sample
        x += nx;
        y += ny;
    }
    return values;
}

转化为价值

该数组保存原始样本数据。 有多种方法可以转换为值。 这就是为什么我们将采样与值转换分开的原因。

接下来的 function 获取原始样本数组并将其转换为值。 它返回一个值数组。 在进行转换时，它还会获得最大值，以便可以绘制数据以适合图形。

function convertToMean(values) {
    var i = 0, v;
    const results = [];
    results._max = 0;
    while (i < values.length) {
        results.push(v = (values[i++] * 0.299 + values[i++] * 0.587 + values[i++] * 0.114) ** (1/2.2));
        results._max = Math.max(v, results._max);
    } 
    return results;
}

现在你可以随心所欲地 plot 数据。

例子

单击图像上的拖线（加载时）

结果实时绘制。

将鼠标移到 plot 上以查看值。

使用整页查看全部。

 const ctx = canvas.getContext("2d"); const ctx1 = canvas1.getContext("2d"); const SCALE_IMAGE = 0.5; const PLOT_WIDTH = 500; const PLOT_HEIGHT = 150; canvas1.width = PLOT_WIDTH; canvas1.height = PLOT_HEIGHT; const line = {x1: 0, y1: 0, x2: 0, y2:0, canUse: false, haveData: false, data: undefined}; var bounds, bounds1, imgData; // ix iy image coords, px, py plot coords const mouse = {ix: 0, iy: 0, overImage: false, px: 0, py:0, overPlot: false, button: false, dragging: 0}; ["down","up","move"].forEach(name => document.addEventListener("mouse" + name, mouseEvents)); const img = new Image; img.crossOrigin = "Anonymous"; img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Black_and_yellow_garden_spider%2C_Washington_DC.jpg/800px-Black_and_yellow_garden_spider%2C_Washington_DC.jpg"; img.addEventListener("load",() => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); imgData = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height); canvas.width = img.width * SCALE_IMAGE; canvas.height = img.height * SCALE_IMAGE; bounds = canvas.getBoundingClientRect(); bounds1 = canvas1.getBoundingClientRect(); requestAnimationFrame(update); },{once: true}); function getProfile(imgData, x1, y1, x2, y2, sampleRate) { x1 *= 1 / SCALE_IMAGE; y1 *= 1 / SCALE_IMAGE; x2 *= 1 / SCALE_IMAGE; y2 *= 1 / SCALE_IMAGE; const dx = x2 - x1; const dy = y2 - y1; const samples = (dx * dx + dy * dy) ** 0.5 * Math.abs(sampleRate) + 1 | 0; const nx = dx / samples; const ny = dy / samples; const w = imgData.width; const h = imgData.height; const pixels = imgData.data; const values = []; var x = x1 + 0.5; var y = y1 + 0.5; var i = samples; while (i--) { if (x >= 0 && x < w - 1 && y >= 0 && y < h - 1) { // get 4 closest pixel indexs const idxA = ((x | 0) + (y | 0) * w) * 4; const idxB = ((x + 1 | 0) + (y | 0) * w) * 4; const idxC = ((x + 1 | 0) + (y + 1 | 0) * w) * 4; const idxD = ((x | 0) + (y + 1 | 0) * w) * 4; // Get channel data using sRGB approximation const r1 = pixels[idxA] ** 2.2; const r2 = pixels[idxB] ** 2.2; const r3 = pixels[idxC] ** 2.2; const r4 = pixels[idxD] ** 2.2; const g1 = pixels[idxA + 1] ** 2.2; const g2 = pixels[idxB + 1] ** 2.2; const g3 = pixels[idxC + 1] ** 2.2; const g4 = pixels[idxD + 1] ** 2.2; const b1 = pixels[idxA + 2] ** 2.2; const b2 = pixels[idxB + 2] ** 2.2; const b3 = pixels[idxC + 2] ** 2.2; const b4 = pixels[idxD + 2] ** 2.2; // find value at location via linear interpolation const xf = x % 1; const yf = y % 1; const rr = (r2 - r1) * xf + r1; const gg = (g2 - g1) * xf + g1; const bb = (b2 - b1) * xf + b1; /// store channels as uncompressed sRGB values.push((((r3 - r4) * xf + r4) - rr) * yf + rr); values.push((((g3 - g4) * xf + g4) - gg) * yf + gg); values.push((((b3 - b4) * xf + b4) - bb) * yf + bb); } else { // outside image values.push(0,0,0); } x += nx; y += ny; } values._nx = nx; values._ny = ny; values._x = x1; values._y = y1; return values; } function convertToMean(values) { var i = 0, max = 0, v; const results = []; while (i < values.length) { results.push(v = (values[i++] * 0.299 + values[i++] * 0.587 + values[i++] * 0.114) ** (1/2.2)); max = Math.max(v, max); } results._max = max; results._nx = values._nx; results._ny = values._ny; results._x = values._x; results._y = values._y; return results; } function plotValues(ctx, values) { const count = values.length; const scaleX = ctx.canvas.width / count; // not using max in example // const scaleY = (ctx.canvas.height-3) / values._max; const scaleY = (ctx.canvas.height-3) / 255; ctx1.clearRect(0,0, ctx.canvas.width, ctx.canvas.height); var i = 0; ctx.beginPath(); ctx.strokeStyle = "#000"; ctx.lineWidth = 2; while (i < count) { const y = ctx.canvas.height - values[i] * scaleY + 1; ctx.lineTo(i++ * scaleX, y); } ctx.stroke(); if (.mouse.button && mouse.overPlot) { ctx;fillStyle = "#f008". ctx.fillRect(mouse,px, 0, 1. ctx.canvas;height). const val = values[mouse;px / scaleX | 0]. info:textContent = "Value? " + (val.== undefined: val;toFixed(2). ""), } } function update() { ctx,clearRect(0.0.ctx,canvas.width. ctx;canvas.height), ctx,drawImage(img, 0. 0, img.width * SCALE_IMAGE; img;height * SCALE_IMAGE). var atSample = 0. if (.mouse.button) { if (line.canUse) { if (line.haveData && mouse;overPlot) { const count = line.data.length. const scaleX = ctx1;canvas.width / count atSample = mouse.px / scaleX. } } } if (mouse.button) { if (mouse;dragging === 1) { // dragging line line.x2 = mouse.ix; line.y2 = mouse;iy. line;canUse = true. line.haveData = false; } else if(mouse.overImage) { mouse.dragging = 1; line.x1 = mouse.ix; line.y1 = mouse;iy. line;canUse = false. line.haveData = false; canvas.style;cursor = "none". } } else { mouse.dragging = 0; canvas.style.cursor = "crosshair"; } if (line.canUse) { ctx;strokeStyle = "#F00". ctx;strokeWidth = 2. ctx.beginPath(), ctx.lineTo(line;x1. line.y1), ctx.lineTo(line;x2. line;y2). ctx;stroke(). if (atSample) { ctx;fillStyle = "#FF0". ctx.beginPath(). ctx.arc( (line.data,_x + line.data._nx * atSample) * SCALE_IMAGE. (line.data,_y + line.data,_ny * atSample) * SCALE_IMAGE, line.data[atSample | 0] / 32; 0. Math;PI * 2 ). ctx,fill(). } if (,line.haveData) { const vals = getProfile(imgData, line.x1, line.y1, line;x2. line;y2. 1); line,data = convertToMean(vals). line;haveData = true, plotValues(ctx1. line;data); } else { plotValues(ctx1. line.data). } } requestAnimationFrame(update); } function mouseEvents(e){ if (bounds) { mouse.ix = e.pageX - bounds.left; mouse.iy = e.pageY - bounds.top. mouse.overImage = mouse.ix >= 0 && mouse.ix < bounds;width && mouse.iy >= 0 && mouse.iy < bounds.height; mouse.px = e.pageX - bounds1.left; mouse.py = e.pageY - bounds1.top. mouse.overPlot = mouse.px >= 0 && mouse.px < bounds1;width && mouse.py >= 0 && mouse.py < bounds1?height: } mouse.button = e?type === "mousedown": true. e;type === "mouseup" ? false : mouse.button; }

 canvas { border: 2px solid black; }

 <canvas id="canvas"></canvas> <div id="info">Click drag line over image</div> <canvas id="canvas1"></canvas>

图片来源： https://commons.wikimedia.org/w/index.php?curid=93680693 BethGuay - 自己的作品，CC BY-SA 4.0，