我怎样才能从javascript或typescript中的条形码图像中删除文本?

yeotifhr  于 2022-11-30  发布在  TypeScript
关注(0)|答案(2)|浏览(153)

这是我的html

<div class="pr-2" style="width: 130px">
            <div *ngIf="!element.editing" >
              <span class="ss">{{element.barcode}}</span>
              </div>
              <div *ngIf="element.editing" >
                <input type="text" [(ngModel)]="element.barcode" style="width: 130px"/>
                </div>
          </div>

这是我的CSS

.ss {
  font-family: 'Libre Barcode 128 Text', cursive;
  font-size: 22px;
}

这是我的javascript函数

barcodeGenerator(value){

  let x = value
  let i, j, intWeight, intLength, intWtProd = 0, arrayData = [];
  let arraySubst = [ "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê" ];

/*
 * Checksum Calculation for Code 128 B
 */
  intLength = x.length;
    arrayData[0] = 104; // Assume Code 128B, Will revise to support A, C and switching.
    intWtProd = 104;
    for (j = 0; j < intLength; j += 1) {
            arrayData[j + 1] = x.charCodeAt(j) - 32; // Have to convert to Code 128 encoding
            intWeight = j + 1; // to generate the checksum
            intWtProd += intWeight * arrayData[j + 1]; // Just a weighted sum
    }
    arrayData[j + 1] = intWtProd % 103; // Modulo 103 on weighted sum
    arrayData[j + 2] = 106; // Code 128 Stop character
  const chr = parseInt(arrayData[j + 1], 10); // Gotta convert from character to a number
  if (chr > 94) {
    var chrString = arraySubst[chr - 95];
  } else {
    chrString = String.fromCharCode(chr + 32);
  }

  // document.getElementById(id).innerHTML =
    return 'Ì' + // Start Code B
    x + // The originally typed string
    chrString + // The generated checksum
    'Î'; // Stop Code
  
    // return `<span class="ss">${x}</span>`;
}

这是输出enter image description here
但我想隐藏/删除条形码下的文本。
就像这个enter image description here

pgvzfuti

pgvzfuti1#

您应使用其他条形码字体,不带文本。
首先包含正确的webfont:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Barcode+128">

然后将css:

.ss {
  font-family: 'Libre Barcode 128', cursive;
  font-size: 22px;
}
rdrgkggo

rdrgkggo2#

作为替代方案
将html更改为以下内容(额外范围):

<div class="pr-2" style="width: 130px">
        <div *ngIf="!element.editing" >
          <span class="ss"><span>{{element.barcode}}</span></span>
          </div>
          <div *ngIf="element.editing" >
            <input type="text" [(ngModel)]="element.barcode" style="width: 130px"/>
            </div>
      </div>

而CSS对此:

.ss span{
  font-family: 'Libre Barcode 128 Text', cursive;
  font-size: 22px;
   display: inline-block;
   transform: scaleY(3);
}

.ss {height: 22px;
  overflow: hidden;
  display: inline-block;

}
这将隐藏条形码下的字母。

相关问题