javascript - canvas crop empty area

Question

I used canvas to make an electronic signature, but there was too much space left after the user signed. Is there any way to capture the blank space?
Sample original picture:

During the signing process, I obtained the area that the mouse passed through, and thus obtained the coordinates of the red area as shown below.

Then pass it to the img object, and then draw it to canvas to crop the red area.

Is there any other way to do it?

Thanks!

Answer 1

First of all, it can be done. canvas.getContext('2d').getImageData(0, 0, 宽, 高)It will return an image data object of the current canvas, which has a data attribute, which is a one-dimensional array. In this one-dimensional array, every 4 subscripts represent the R of a pixel. The author only needs to traverse the values ​​​​of G, B, and A to find the boundary. The following is the pseudo code implementation

var canvas = document.createElement('canvas')
canvas.width = 200
canvas.height = 210
document.body.appendChild(canvas)

var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.moveTo(0,50)
ctx.lineTo(100,50)
ctx.lineTo(100,25)
ctx.fill() // 出于演示目的随便画了个三角形

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data

var lOffset = canvas.width, rOffset = 0,tOffset = canvas.height, bOffset = 0

for (var i = 0; i < canvas.width; i++) {
    for (var j = 0; j < canvas.height; j++) {
        var pos = (i + canvas.width * j) * 4
        if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
            // 说第j行第i列的像素不是透明的
            // 楼主貌似底图是有背景色的,所以具体判断RGBA的值可以根据是否等于背景色的值来判断
            bOffset = Math.max(j, bOffset) // 找到有色彩的最底部的纵坐标
            rOffset = Math.max(i, rOffset) // 找到有色彩的最右端

            tOffset = Math.min(j, tOffset) // 找到有色彩的最上端
            lOffset = Math.min(i, lOffset) // 找到有色彩的最左端
        }
    }
}
// 由于循环是从0开始的,而我们认为的行列是从1开始的
lOffset++
rOffset++
tOffset++
bOffset++
console.log(lOffset, rOffset, tOffset, bOffset) // 1 100 26 50
// 意思是说包含有像素的区域是 左边第1行,到右边第100行,顶部第26行,到底部50行
// 此时如果你想找到外部区域的话,就是 left和top减1  right和bottom加1的区域
// 分别是0, 101, 25, 51.这个区间能够刚好包裹住

Answer 2

Scan pixels through ImageData, scanning line by line, to maintain the coordinates of the upper left corner and lower right corner, or the coordinates of the upper right corner and lower left corner.

Answer 3

//将签名后的canvas存为图片
var oldUrl = canvas1.toDataURL();
var originImage = new Image();
originImage.src = oldUrl;

//用9参数的drawImage方法对图片进行裁减
ctx2.drawImage(originImage,startX,startY,cropWidth,cropHeight,0,0,cropWidth,cropHeight);
var newUrl = canvas2.toDataURL();
var newImage = new Image();
newImage.src = newUrl;

Answer 4

Simply enlarging the carvas, I don’t know if it can meet your needs.
The original poster means that you have got the picture in the red box, then you can know the width and height of the picture, and calculate the image and carvas based on the width and height of the carvas. Zoom ratio
Set the magnification ratio through the ctx.scale(widthScale, heightScale) method.
Then ctx draws the image.

Answer 5

Has the poster solved it? Get a rectangular image with specified coordinates?