Question

我想从数据库中获取图像，并将其显示在画布上并在其上绘制形状。有没有一种方法可以使用图像作为字节数组等在画布上绘制图像。

Answer 1

<canvas>就像一张普通的<img>图像，不同之处在于页面的JavaScript代码实际上可以控制像素的值。

您可以通过绘制线条，多边形，弧形甚至其他图像之类的图元来确定画布的内容。您还可以通过处理每个像素的实际红色，绿色，蓝色和透明度值（使用getImageData和putImageData）来设置或更改内容。您可以根据需要调整画布的大小，并且在画布上绘制的速度非常快...足够快，以至于只需使用简单的Javascript代码即可制作复杂的动画。

例如，将图像更改为黑白并添加红色网格后，加载图像并将其绘制在画布中的代码可能是：

function canvasTest(img) {
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    let ctx = canvas.getContext("2d");

    // Copy image pixels to the canvas
    ctx.drawImage(img, 0, 0);

    // Now let's set R and B channels equal to G
    let idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for (let i=0,n=img.width*img.height*4; i<n; i+=4) {
        idata.data[i] = idata.data[i+2] = idata.data[i+1];
    }
    ctx.putImageData(idata, 0, 0);

    // Add a red grid
    ctx.beginPath();
    for (let y=0; y<img.height; y+=50) {
        ctx.moveTo(0, y+0.5); ctx.lineTo(img.width, y+0.5);
    }
    for (let x=0; x<img.width; x+=50) {
        ctx.moveTo(x+0.5, 0); ctx.lineTo(x+0.5, img.height);
    }
    ctx.strokeStyle = "#F00";
    ctx.lineWidth = 1;
    ctx.stroke();

    // add the final result to page
    document.body.appendChild(canvas);
}

唯一的烦恼是，如果您在画布上绘制图像并且该图像来自与页面来源不同的原点，那么该画布通常会变成“污点”，并且您无法访问像素值（禁止getImageData）。此限制的原因是安全性（以及可悲的事实，即Web应用程序中的安全性在客户端上）。就您而言，由于图像数据库是您的数据库，所以应该没有问题。

HTML Canvas从数据库绘制图像

1 个答案: