javascript - zone vide de recadrage du canevas

Question

J'avais l'habitude de créer une signature électronique canvas, mais il restait trop d'espace après la signature de l'utilisateur. Existe-t-il un moyen de capturer l'espace vide ?
Exemple d'image originale :

J'ai obtenu la zone où la souris est passée lors du processus de signature, et ainsi obtenu les coordonnées de la zone rouge comme indiqué ci-dessous.

Puis transmettez-le à l'objet img, puis dessinez-le vers img 对象，再绘制到 canvas pour recadrer la zone rouge.

Y a-t-il une autre façon de procéder ?

Merci !

Answer 1

Tout d'abord, cela peut être fait. canvas.getContext('2d').getImageData(0, 0, 宽, 高)Cela renverra un objet de données image du canevas actuel, qui a un attribut de données, qui est un tableau unidimensionnel, tous les 4 indices représentent le R. d'un pixel. Pour les valeurs de G, B et A, l'auteur n'a qu'à parcourir ces valeurs pour trouver la limite. Ce qui suit est l'implémentation du pseudo-code

.

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

Scannez les pixels à travers ImageData, en numérisant ligne par ligne, pour conserver les coordonnées du coin supérieur gauche et du coin inférieur droit, ou les coordonnées du coin supérieur droit et du coin inférieur gauche.

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

Je ne sais pas si le simple fait d'agrandir la carvas peut répondre à vos besoins
L'affiche originale signifie que vous avez l'image dans la case rouge, vous pouvez alors connaître la largeur et la hauteur de l'image, et calculer l'image et la carvas. en fonction de la largeur et de la hauteur des carvas. Taux de zoom
Définissez le taux de grossissement via la méthode ctx.scale(widthScale, heightScale).
Ensuite, ctx dessine l'image.

Answer 5

L'affiche a-t-elle résolu le problème ? Obtenez une image rectangulaire avec des coordonnées spécifiées ?