HTML Canvas 从数据库中绘制图像 [重复]

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 应用程序中的安全性在客户端上的可悲事实）。在你的情况下，因为图像数据库是你的，所以应该没有问题。