关于javascript:icon-格式图片canvas画法

56次阅读

共计 1834 个字符,预计需要花费 5 分钟才能阅读完成。

#data 格局

 {
    kCursorResId:0,
    kBitmapMaskWidth: 0,
    kBitmapMaskHeight: 0,
    kBitmapMaskData: [],
    kBitmapMaskBitsPixel: 0,
    kBitmapColorWidth: 0,
    kBitmapColorHeight: 0,
    kBitmapColorData: [],
    kBitmapColorBitsPixel: 0,
    x: 0,
    y: 0,
}

 let maskWidth = data.kBitmapMaskWidth || 0;
 let maskHeight = data.kBitmapMaskHeight || 0;
 let colorWidth = data.kBitmapColorWidth || 0;
 let colorHeight = data.kBitmapColorHeight || 0;
 let maskData = data.kBitmapMaskData || [];
 let colorData = data.kBitmapColorData;
 let maskBitsPixel = data.kBitmapMaskBitsPixel;
 let colorBitsPixel = data.kBitmapColorBitsPixel;
 const ctx = canvas.getContext("2d")
 let cols = colorWidth || maskWidth
 let rows = colorHeight || maskHeight
 ctx.canvas.width = cols;
 ctx.canvas.height = rows;
 ctx.fillStyle = 'rgba(255,255,255,0)';
 ctx.clearRect(0, 0, cols, rows);
 if (!colorData || !colorData.length) {
 
 // 没有 color data
     if (!maskData || !maskData.length) {cursorImgurl = null;} else if (maskBitsPixel === 1) {

         // 黑白 icon
         let len = maskData.length;
         let maskRealData = maskData.slice(0, len / 2);
         let colorRealData = maskData.slice(len / 2);
         rows = rows / 2;
         ctx.canvas.height = rows;
         for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {let index = Math.floor((i * cols + j) / 8);
                 let pos = (i * cols + j) % 8;
                 let maskBitCon = maskRealData[index] & (0b10000000 >> pos);
                 let colorBit = (colorRealData[index] & (0b10000000 >> pos)) ? 255 : 0;
                 let maskBit = maskBitCon ? colorBit / 255 : 1;
                 ctx.fillStyle = 'rgba(' + colorBit + ',' + colorBit + ',' + colorBit + ',' + maskBit + ')';
                 ctx.fillRect(j, i, 1, 1);
             }
        }
        cursorImgurl = canvas.toDataURL('image/png');
    }
 } else {
     // 黑白
     for (let i = 0; i < rows; i++) {for (let j = 0; j < cols; j++) {
             let index = i * cols * 4 + j * 4;
             let maskInd = Math.floor((i * cols + j) / 8);
             let pos = (i * cols + j) % 8;
             let r = colorData[index + 2];
             let g = colorData[index + 1];
             let b = colorData[index];
             let mask = (maskData[maskInd] & (0b10000000 >> pos)) ? 0 : 1;
             let ca = colorData[index + 3];
             let a = ca !== 255 ? Math.floor(ca / 255) : mask ? 1 : 0;
             ctx.fillStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
             ctx.fillRect(j, i, 1, 1);
         }
    }
    cursorImgurl = canvas.toDataURL('image/png');
 }

正文完
 0