国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

javascript - canvas 裁剪空白區(qū)域
黃舟
黃舟 2017-05-16 13:26:16
0
5
1233

canvas 做了一個電子簽名,可是用戶簽名后留白太多。有什么辦法可以截取空白區(qū)域嗎?
示例原圖:

我是在簽字過程中,獲取鼠標(biāo)經(jīng)過的區(qū)域,從而得到如下圖紅色區(qū)域坐標(biāo)。

然后傳給 img 對象,再繪制到 canvas 上裁剪紅色區(qū)域。

有什么其他方式可以做到嗎?

謝謝!

黃舟
黃舟

人生最曼妙的風(fēng)景,竟是內(nèi)心的淡定與從容!

全部回復(fù)(5)
滿天的星座

首先是可以做到的, canvas.getContext('2d').getImageData(0, 0, 寬, 高)會返回一個當(dāng)前canvas的圖像數(shù)據(jù)對象,其中有一個data屬性,是一個一維數(shù)組,這個一維數(shù)組,每4個下標(biāo)分別代表了一個像素點的R,G,B,A的值,樓主只需要遍歷這些值就能找到邊界了.下面是偽代碼實現(xiàn)

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的值可以根據(jù)是否等于背景色的值來判斷
            bOffset = Math.max(j, bOffset) // 找到有色彩的最底部的縱坐標(biāo)
            rOffset = Math.max(i, rOffset) // 找到有色彩的最右端

            tOffset = Math.min(j, tOffset) // 找到有色彩的最上端
            lOffset = Math.min(i, lOffset) // 找到有色彩的最左端
        }
    }
}
// 由于循環(huán)是從0開始的,而我們認(rèn)為的行列是從1開始的
lOffset++
rOffset++
tOffset++
bOffset++
console.log(lOffset, rOffset, tOffset, bOffset) // 1 100 26 50
// 意思是說包含有像素的區(qū)域是 左邊第1行,到右邊第100行,頂部第26行,到底部50行
// 此時如果你想找到外部區(qū)域的話,就是 left和top減1  right和bottom加1的區(qū)域
// 分別是0, 101, 25, 51.這個區(qū)間能夠剛好包裹住
世界只因有你

通過 ImageData 掃描像素點,一行一行的掃描,維護(hù)左上角右下角坐標(biāo),或者右上角左下角坐標(biāo)。

為情所困

簡單的對carvas進(jìn)行放大不知道能不能滿足你的需求,
看樓主的意思是已經(jīng)得到紅框內(nèi)的圖片,那么就可以知道圖片的寬高,在根據(jù)carvas的寬高計算圖像和carvas的縮放比
通過ctx.scale(widthScale, heightScale)方法設(shè)置放大比例。
然后ctx繪制圖像。

洪濤

樓主解決了呢,獲取指定坐標(biāo)的矩形圖片?

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板