Javascript 如何知道用户绘制的内容是否覆盖了大部分画布区域？

我有一个画布，用户可以在其中写一些东西，它显示了以前保存的图形。但由于某些因素，我们检测到其中一些未使用总画布区域。因此，我的问题是：

• 我是否可以检测用户绘制的区域并将其放大 撕碎使用过的画布空间
• 或者，我可以检测用户是否 使用的是整个画布区域还是超过60%的画布区域？如果是， 怎样？这样我可以向用户发出警告

谢谢

我是否可以检测用户绘制的区域并将其放大 撕碎使用过的画布空间

通过使用短语“撕碎未绘制的空间”，我假设您希望将现有图像放大以填充所有画布区域

是的，你可以

步骤1

您可以使用

getImageData

从画布获取像素颜色数据。此数据是一个数组，包含画布上每个像素的红色、绿色、蓝色和alpha值

var pixelData=mainContext.getImageData(0,0,mainCanvas.width,mainCanvas.height).data;

画布像素[0,0]的数据：

• pixelData[0]是画布像素[0,0]的红色组件
• pixelData[1]是画布像素[0,0]的绿色组件
• pixelData[2]是画布像素[0,0]的蓝色组件
• pixelData[3]是画布像素[0,0]的alpha分量

画布像素[1,0]的数据：

• pixelData[4]是画布像素[1,0]的红色组件
• pixelData[5]是画布像素[1,0]的绿色组件
• pixelData[6]是画布像素[1,0]的蓝色组件
• pixelData[7]是画布像素[1,0]的alpha组件

使用像素数据确定用户不透明像素的边界框。通过确定alpha>250的最上面、最左边、最下面和最右边的像素来实现

var boundLeft,boundTop,boundRight,boundBottom,boundWidth,boundHeight;

function getBounds(){
    boundLeft=1000000;
    boundTop=1000000;
    boundRight=-1000000;
    boundBottom=-1000000;
    //
    var d=ctx.getImageData(0,0,cw,ch).data;
    //
    for(var i=0;i<d.length;i+=4){
        // test the alpha (d[i+3])
        if(d[i+3]>250){
            var px=parseInt(i/4);
            var pixelY=parseInt(px/cw);
            var pixelX=px-pixelY*cw;
            if(pixelX<boundLeft){boundLeft=pixelX;}
            if(pixelX>boundRight){boundRight=pixelX;}
            if(pixelY<boundTop){boundTop=pixelY;}
            if(pixelY>boundBottom){boundBottom=pixelY;}
            boundWidth=boundRight-boundLeft;
            boundHeight=boundBottom-boundTop;
        }
    }
}

步骤3

使用

context.drawImage

的剪裁版本将边界区域从主画布绘制到内存画布

memContext.drawImage(mainCanvas,
    // grab the "used" pixels from the main canvas
    boundLeft,boundTop,boundWidth,boundHeight,
    // and draw those pixels on the in-memory canvas
    0,0,boundWidth,boundHeight
);

步骤4

（可选地将主画布调整为边界框大小）

将内存画布绘制到主画布上

mainContext.clearRect(0,0,mainCanvas.width,mainCanvas.height);
mainContext.drawImage(memCanvas,0,0);

我可以检测用户是否正在使用完整的画布区域，或者说 超过60%吗？如果是，如何进行？这样我就可以向公众发出警告了 用户

是的，你可以

使用上述相同的方法计算boundWidth和boundHeight

然后，您可以使用边界框大小与画布大小的比率来计算“已使用”画布的百分比：

var percent = (boundWidth*boundHeight) / (mainCanvas.width*mainCanvas.height);

在用户添加到图形时计算新的边界框

在用户绘制每个新像素后，不必使用

getImageData

计算新边界框，而是可以在新像素超出现有边界时展开边界框：

if(newPixelX<leftmost){boundLeft=newPixelX;}
if(newPixelX>rightmost){boundRight=newPixelX;}
if(newPixelY<topmost){boundTop=newPixelY;}
if(newPpixelY>bottommost){boundBottom=newPixelY;}

消除外部空间
拖动鼠标

我也在用同样的技术。但是，当我使用js库来管理绘图（jquery.signature.js）时，它使事情变得简单了很多。无论如何，非常感谢您用一种简单而又极好的方式描述了整个逻辑。谢谢你，马克。

var percent = (boundWidth*boundHeight) / (mainCanvas.width*mainCanvas.height);

if(newPixelX<leftmost){boundLeft=newPixelX;}
if(newPixelX>rightmost){boundRight=newPixelX;}
if(newPixelY<topmost){boundTop=newPixelY;}
if(newPpixelY>bottommost){boundBottom=newPixelY;}