uview-ultra 4.5.46 → 4.5.48

package/components/up-barcode/up-barcode.uvue

@@ -31,12 +31,12 @@
   </view>
 </template>
 
-<script setup lang="uts">
-import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
-
-function stringValue(value: any | null): string {
-  return value == null ? '' : value.toString()
-}
+<script setup lang="uts">
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+
+function stringValue(value: any | null): string {
+  return value == null ? '' : value.toString()
+}
 
 function normalizeNumber(value: any | null, defaultValue: number): number {
   if (typeof value === 'number') {
@@ -155,626 +155,627 @@ function code39Map(): UTSJSONObject {
   } as UTSJSONObject
 }
 
-defineOptions({
-  styleIsolation: 'app-and-page',
-  name: 'up-barcode'
-})
-
-const props = defineProps({
-  value: {
-    type: [String, Number],
-    default: ''
-  },
-  format: {
-    type: String,
-    default: 'auto'
-  },
-  width: {
-    type: Number,
-    default: 200
-  },
-  height: {
-    type: Number,
-    default: 80
-  },
-  displayValue: {
-    type: Boolean,
-    default: true
-  },
-  text: {
-    type: String,
-    default: ''
-  },
-  fontOptions: {
-    type: String,
-    default: ''
-  },
-  font: {
-    type: String,
-    default: 'monospace'
-  },
-  textAlign: {
-    type: String,
-    default: 'center'
-  },
-  textPosition: {
-    type: String,
-    default: 'bottom'
-  },
-  textMargin: {
-    type: Number,
-    default: 2
-  },
-  fontSize: {
-    type: Number,
-    default: 14
-  },
-  background: {
-    type: String,
-    default: '#ffffff'
-  },
-  lineColor: {
-    type: String,
-    default: '#000000'
-  },
-  margin: {
-    type: Number,
-    default: 10
-  },
-  marginTop: {
-    type: Number,
-    default: -1
-  },
-  marginBottom: {
-    type: Number,
-    default: -1
-  },
-  marginLeft: {
-    type: Number,
-    default: -1
-  },
-  marginRight: {
-    type: Number,
-    default: -1
-  },
-  useCanvas: {
-    type: Boolean,
-    default: true
-  }
-})
-
-const emit = defineEmits(['rendered', 'error'])
-const instance = getCurrentInstance()!.proxy!
-
-const canvasId = ref('up-barcode-' + Date.now().toString())
-const barcodeImage = ref('')
-const showCanvas = ref(false)
-const canvasContext = ref<CanvasContext | null>(null)
-const ctx = ref<CanvasRenderingContext2D | null>(null)
-const bars = ref<Array<UTSJSONObject>>([] as Array<UTSJSONObject>)
-const canvasWidth = ref(200)
-const canvasHeight = ref(80)
-const error = ref('')
-
-const marginTopValue = computed((): number => {
-  return props.marginTop >= 0 ? props.marginTop : props.margin
-})
-
-const marginBottomValue = computed((): number => {
-  return props.marginBottom >= 0 ? props.marginBottom : props.margin
-})
-
-const marginLeftValue = computed((): number => {
-  return props.marginLeft >= 0 ? props.marginLeft : props.margin
-})
-
-const marginRightValue = computed((): number => {
-  return props.marginRight >= 0 ? props.marginRight : props.margin
-})
-
-const displayText = computed((): string => {
-  return props.text.length > 0 ? props.text : stringValue(props.value)
-})
-
-const showTopText = computed((): boolean => {
-  return props.displayValue && props.textPosition == 'top' && error.value.length == 0
-})
-
-const showBottomText = computed((): boolean => {
-  return props.displayValue && props.textPosition != 'top' && error.value.length == 0
-})
-
-const showImage = computed((): boolean => {
-  return props.useCanvas == false && barcodeImage.value.length > 0 && error.value.length == 0
-})
-
-const rootStyle = computed((): UTSJSONObject => {
-  return {
-    width: canvasWidth.value.toString() + 'px',
-    minHeight: canvasHeight.value.toString() + 'px',
-    paddingTop: marginTopValue.value.toString() + 'px',
-    paddingBottom: marginBottomValue.value.toString() + 'px',
-    paddingLeft: marginLeftValue.value.toString() + 'px',
-    paddingRight: marginRightValue.value.toString() + 'px',
-    backgroundColor: props.background
-  } as UTSJSONObject
-})
-
-const barcodeStyle = computed((): UTSJSONObject => {
-  return {
-    width: props.width.toString() + 'px',
-    height: props.height.toString() + 'px',
-    backgroundColor: props.background
-  } as UTSJSONObject
-})
-
-const canvasStyle = computed((): UTSJSONObject => {
-  return {
-    width: canvasWidth.value.toString() + 'px',
-    height: canvasHeight.value.toString() + 'px'
-  } as UTSJSONObject
-})
-
-const imageStyle = computed((): UTSJSONObject => {
-  return {
-    width: canvasWidth.value.toString() + 'px',
-    height: canvasHeight.value.toString() + 'px'
-  } as UTSJSONObject
-})
-
-const textStyle = computed((): UTSJSONObject => {
-  const style = {
-    fontSize: props.fontSize.toString() + 'px',
-    lineHeight: (props.fontSize + props.textMargin).toString() + 'px',
-    color: props.lineColor,
-    textAlign: props.textAlign
-  } as UTSJSONObject
-  return style
-})
-
-const getBarStyle = (bar: UTSJSONObject): UTSJSONObject => {
-  return {
-    width: normalizeNumber(bar['width'], 1).toString() + 'px',
-    height: props.height.toString() + 'px',
-    backgroundColor: stringValue(bar['color'])
-  } as UTSJSONObject
-}
-
-const initCanvas = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    uni.createCanvasContextAsync({
-      id: canvasId.value.toString() as string.IDString,
-      component: instance,
-      success: (context: CanvasContext) => {
-        canvasContext.value = context
-        ctx.value = context.getContext('2d')
-        resolve()
-      },
-      fail: (err: UniError) => {
-        reject(err)
-      }
-    })
-  })
-}
-
-const getErrorMessage = (err: any | null): string => {
-  if (err == null) {
-    return ''
-  }
-  const errObj = err as UTSJSONObject
-  const message = errObj['message']
-  return message == null ? err.toString() : message.toString()
-}
-
-const createBars = (bits: string): Array<UTSJSONObject> => {
-  const list = [] as Array<UTSJSONObject>
-  if (bits.length == 0) {
-    return list
-  }
-  const moduleWidth = props.width / bits.length
-  let current = bits.substring(0, 1)
-  let count = 1
-  for (let i = 1; i < bits.length; i++) {
-    const bit = bits.substring(i, i + 1)
-    if (bit == current) {
-      count++
-    } else {
-      list.push({
-        color: current == '1' ? props.lineColor : props.background,
-        width: count * moduleWidth
-      } as UTSJSONObject)
-      current = bit
-      count = 1
-    }
-  }
-  list.push({
-    color: current == '1' ? props.lineColor : props.background,
-    width: count * moduleWidth
-  } as UTSJSONObject)
-  return list
-}
-
-const encodeCode128 = (data: string): string => {
-  const chars = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"
-  const codes = [] as Array<number>
-  let checksum = 104
-  codes.push(104)
-  for (let i = 0; i < data.length; i++) {
-    const code = chars.indexOf(data.substring(i, i + 1))
-    if (code < 0) {
-      throw new Error('Invalid character in CODE128')
-    }
-    codes.push(code)
-    checksum += code * (i + 1)
-  }
-  codes.push(checksum % 103)
-  codes.push(106)
-  const patterns = code128Patterns()
-  let barcode = ''
-  for (let i = 0; i < codes.length; i++) {
-    barcode += patterns[codes[i]]
-  }
-  return barcode + '00000'
-}
-
-const encodeCode39 = (data: string): string => {
-  const codes = code39Map()
-  const value = data.toUpperCase()
-  let barcode = stringValue(codes['*'])
-  for (let i = 0; i < value.length; i++) {
-    const char = value.substring(i, i + 1)
-    const code = codes[char]
-    if (code == null) {
-      throw new Error('Invalid character in CODE39')
-    }
-    barcode += '0' + code.toString()
-  }
-  return barcode + '0' + stringValue(codes['*'])
-}
-
-const encodeEAN13 = (data: string): string => {
-  if (!/^\d{13}$/.test(data)) {
-    throw new Error('EAN13 must be 13 digits')
-  }
-  let sum = 0
-  for (let i = 0; i < 12; i++) {
-    const digit = digitAt(data, i)
-    sum += i % 2 == 0 ? digit : digit * 3
-  }
-  const checkDigit = (10 - (sum % 10)) % 10
-  if (digitAt(data, 12) != checkDigit) {
-    throw new Error('Invalid EAN13 check digit')
-  }
-  const leftData = data.substring(1, 7)
-  const rightData = data.substring(7, 13)
-  const parity = [
-    'LLLLLL', 'LLGLGG', 'LLGGLG', 'LLGGGL', 'LGLLGG',
-    'LGGLLG', 'LGGGLL', 'LGLGLG', 'LGLGGL', 'LGGLGL'
-  ] as Array<string>
-  const odd = leftOddCodes()
-  const even = leftEvenCodes()
-  const right = rightCodes()
-  const pattern = parity[digitAt(data, 0)]
-  let barcode = '101'
-  for (let i = 0; i < leftData.length; i++) {
-    const digit = digitAt(leftData, i)
-    barcode += pattern.substring(i, i + 1) == 'L' ? odd[digit] : even[digit]
-  }
-  barcode += '01010'
-  for (let i = 0; i < rightData.length; i++) {
-    barcode += right[digitAt(rightData, i)]
-  }
-  return barcode + '101'
-}
-
-const encodeEAN8 = (data: string): string => {
-  if (!/^\d{8}$/.test(data)) {
-    throw new Error('EAN8 must be 8 digits')
-  }
-  let sum = 0
-  for (let i = 0; i < 7; i++) {
-    const digit = digitAt(data, i)
-    sum += digit * (i % 2 == 0 ? 3 : 1)
-  }
-  const checkDigit = (10 - (sum % 10)) % 10
-  if (digitAt(data, 7) != checkDigit) {
-    throw new Error('Invalid EAN8 check digit')
-  }
-  const odd = leftOddCodes()
-  const right = rightCodes()
-  let barcode = '101'
-  for (let i = 0; i < 4; i++) {
-    barcode += odd[digitAt(data, i)]
-  }
-  barcode += '01010'
-  for (let i = 4; i < 8; i++) {
-    barcode += right[digitAt(data, i)]
-  }
-  return barcode + '101'
-}
-
-const encodeEAN52 = (data: string, format: string): string => {
-  const length = format == 'EAN5' ? 5 : 2
-  if (data.length != length || !/^\d+$/.test(data)) {
-    throw new Error(format + ' must be ' + length.toString() + ' digits')
-  }
-  const codes = leftOddCodes()
-  let barcode = '1011'
-  for (let i = 0; i < data.length; i++) {
-    if (i > 0) {
-      barcode += '01'
-    }
-    barcode += codes[digitAt(data, i)]
-  }
-  return barcode
-}
-
-const encodeUPCA = (data: string): string => {
-  let value = data
-  if (/^\d{11}$/.test(value)) {
-    let sum = 0
-    for (let i = 0; i < 11; i++) {
-      const digit = digitAt(value, i)
-      sum += i % 2 == 0 ? digit * 3 : digit
-    }
-    value += ((10 - (sum % 10)) % 10).toString()
-  }
-  if (!/^\d{12}$/.test(value)) {
-    throw new Error('UPC-A must be 11 or 12 digits')
-  }
-  return encodeEAN13('0' + value)
-}
-
-const encodeUPCE = (data: string): string => {
-  let value = data
-  if (/^\d{7}$/.test(value)) {
-    let sum = 0
-    for (let i = 0; i < 7; i++) {
-      const digit = digitAt(value, i)
-      sum += i % 2 == 0 ? digit * 3 : digit
-    }
-    value += ((10 - (sum % 10)) % 10).toString()
-  }
-  if (!/^\d{8}$/.test(value)) {
-    throw new Error('UPC-E must be 7 or 8 digits')
-  }
-  const odd = leftOddCodes()
-  const even = leftEvenCodes()
-  const middle = value.substring(1, 7)
-  const checkDigit = value.substring(7, 8)
-  let pattern = 'EEOOOO'
-  if (checkDigit == '0' || checkDigit == '1' || checkDigit == '2' || checkDigit == '3') {
-    pattern = 'EEEEOO'
-  } else if (checkDigit == '4') {
-    pattern = 'EEEOOO'
-  }
-  let barcode = '101'
-  for (let i = 0; i < middle.length; i++) {
-    const digit = digitAt(middle, i)
-    barcode += pattern.substring(i, i + 1) == 'E' ? even[digit] : odd[digit]
-  }
-  return barcode + '010101101'
-}
-
-const encodeBarcode = (value: string, format: string): string => {
-  switch (format) {
-    case 'CODE39':
-      return encodeCode39(value)
-    case 'EAN13':
-      return encodeEAN13(value)
-    case 'EAN8':
-      return encodeEAN8(value)
-    case 'EAN5':
-    case 'EAN2':
-      return encodeEAN52(value, format)
-    case 'UPC':
-    case 'UPCA':
-      return encodeUPCA(value)
-    case 'UPCE':
-      return encodeUPCE(value)
-    case 'CODE128':
-    case 'auto':
-    default:
-      return encodeCode128(value)
-  }
-}
-
-const drawCanvasText = (context: CanvasRenderingContext2D, barcodeY: number, textHeight: number): void => {
-  const text = displayText.value
-  const textX = props.textAlign == 'left'
-    ? marginLeftValue.value
-    : (props.textAlign == 'right' ? canvasWidth.value - marginRightValue.value : canvasWidth.value / 2)
-  let textY = props.textPosition == 'top'
-    ? marginTopValue.value + props.fontSize
-    : barcodeY + props.height + props.textMargin + props.fontSize
-  if (textY > canvasHeight.value - marginBottomValue.value) {
-    textY = canvasHeight.value - marginBottomValue.value - 2
-  }
-  context.fillStyle = props.lineColor
-  context.font = props.fontOptions.length > 0
-    ? props.fontOptions + ' ' + props.fontSize.toString() + 'px ' + props.font
-    : props.fontSize.toString() + 'px ' + props.font
-  context.textAlign = props.textAlign == 'left' || props.textAlign == 'right' ? props.textAlign : 'center'
-  context.fillText(text, textX, textY)
-}
-
-const drawCanvasBarcode = (): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    const context = ctx.value
-    if (context == null) {
-      reject(new Error('Canvas is not ready'))
-      return
-    }
-    try {
-      const bits = encodeBarcode(stringValue(props.value), props.format)
-      context.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
-      context.fillStyle = props.background
-      context.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
-      let barcodeY = marginTopValue.value
-      const textHeight = props.displayValue ? props.fontSize + props.textMargin : 0
-      if (props.displayValue && props.textPosition == 'top') {
-        barcodeY += textHeight
-      }
-      const moduleWidth = props.width / Math.max(1, bits.length)
-      context.fillStyle = props.lineColor
-      let x = marginLeftValue.value
-      for (let i = 0; i < bits.length; i++) {
-        if (bits.substring(i, i + 1) == '1') {
-          context.fillRect(x, barcodeY, moduleWidth + 0.5, props.height)
-        }
-        x += moduleWidth
-      }
-      if (props.displayValue) {
-        drawCanvasText(context, barcodeY, textHeight)
-      }
-      context.draw()
-      resolve()
-    } catch (err) {
-      reject(err)
-    }
-  })
-}
-
-const exportImage = (): Promise<string> => {
-  return new Promise((resolve, reject) => {
-    showCanvas.value = true
-    nextTick(() => {
-      initCanvas().then(() => {
-        drawCanvasBarcode().then(() => {
-          const canvas = canvasContext.value
-          if (canvas == null) {
-            showCanvas.value = false
-            reject(new Error('Canvas is not ready'))
-            return
-          }
-          const dataUrl = canvas.toDataURL('image/png', 1)
-          showCanvas.value = false
-          emit('rendered', { type: 'image', value: props.value, path: dataUrl } as UTSJSONObject)
-          resolve(dataUrl)
-        }).catch((err: any | null) => {
-          showCanvas.value = false
-          reject(err)
-        })
-      }).catch((err: any | null) => {
-        showCanvas.value = false
-        reject(err)
-      })
-    })
-  })
-}
-
-const generateBarcode = (): void => {
-  try {
-    error.value = ''
-    const bits = encodeBarcode(stringValue(props.value), props.format)
-    bars.value = createBars(bits)
-    const textHeight = props.displayValue ? props.fontSize + props.textMargin : 0
-    canvasWidth.value = props.width + marginLeftValue.value + marginRightValue.value
-    canvasHeight.value = props.height + marginTopValue.value + marginBottomValue.value + textHeight
-    if (props.useCanvas == false) {
-      nextTick(() => {
-        exportImage().then((path: string) => {
-          barcodeImage.value = path
-        }).catch((err: any | null) => {
-          emit('error', err)
-        })
-      })
-    } else {
-      barcodeImage.value = ''
-    }
-    emit('rendered', {
-      type: props.useCanvas == false ? 'image' : 'view',
-      value: props.value,
-      format: props.format,
-      path: barcodeImage.value
-    } as UTSJSONObject)
-  } catch (err) {
-    const message = getErrorMessage(err)
-    error.value = message.length > 0 ? message : '生成条码失败'
-    bars.value = [] as Array<UTSJSONObject>
-    emit('error', {
-      message: error.value,
-      value: props.value,
-      format: props.format
-    } as UTSJSONObject)
-  }
-}
-
-function toTempFilePath(options: UTSJSONObject = {} as UTSJSONObject): void {
-  const success = options['success'] as ((res: UTSJSONObject) => void) | null
-  const fail = options['fail'] as ((err: any | null) => void) | null
-  exportImage().then((path: string) => {
-    if (success != null) {
-      success({ tempFilePath: path, path } as UTSJSONObject)
-    }
-  }).catch((err: any | null) => {
-    if (fail != null) {
-      fail(err)
-    } else {
-      emit('error', err)
-    }
-  })
-}
-
-watch((): any => props.value, () => { generateBarcode() })
-watch((): string => props.format, () => { generateBarcode() })
-watch((): number => props.width, () => { generateBarcode() })
-watch((): number => props.height, () => { generateBarcode() })
-watch((): boolean => props.displayValue, () => { generateBarcode() })
-watch((): string => props.text, () => { generateBarcode() })
-watch((): string => props.textPosition, () => { generateBarcode() })
-watch((): number => props.textMargin, () => { generateBarcode() })
-watch((): number => props.fontSize, () => { generateBarcode() })
-watch((): string => props.background, () => { generateBarcode() })
-watch((): string => props.lineColor, () => { generateBarcode() })
-watch((): number => props.margin, () => { generateBarcode() })
-
-onMounted((): void => {
-  generateBarcode()
-})
-
-defineExpose({
-  canvasId,
-  barcodeImage,
-  showCanvas,
-  canvasContext,
-  ctx,
-  bars,
-  canvasWidth,
-  canvasHeight,
-  error,
-  marginTopValue,
-  marginBottomValue,
-  marginLeftValue,
-  marginRightValue,
-  displayText,
-  showTopText,
-  showBottomText,
-  showImage,
-  rootStyle,
-  barcodeStyle,
-  canvasStyle,
-  imageStyle,
-  textStyle,
-  getBarStyle,
-  generateBarcode,
-  toTempFilePath,
-  exportImage,
-  initCanvas,
-  drawCanvasBarcode,
-  drawCanvasText,
-  getErrorMessage,
-  createBars,
-  encodeBarcode,
-  encodeCode128,
-  encodeCode39,
-  encodeEAN13,
-  encodeEAN8,
-  encodeEAN52,
-  encodeUPCA,
-  encodeUPCE
-})
-</script>
+defineOptions({
+  styleIsolation: 'app-and-page',
+  name: 'up-barcode'
+})
+
+const props = defineProps({
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+  format: {
+    type: String,
+    default: 'auto'
+  },
+  width: {
+    type: Number,
+    default: 200
+  },
+  height: {
+    type: Number,
+    default: 80
+  },
+  displayValue: {
+    type: Boolean,
+    default: true
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+  fontOptions: {
+    type: String,
+    default: ''
+  },
+  font: {
+    type: String,
+    default: 'monospace'
+  },
+  textAlign: {
+    type: String,
+    default: 'center'
+  },
+  textPosition: {
+    type: String,
+    default: 'bottom'
+  },
+  textMargin: {
+    type: Number,
+    default: 2
+  },
+  fontSize: {
+    type: Number,
+    default: 14
+  },
+  background: {
+    type: String,
+    default: '#ffffff'
+  },
+  lineColor: {
+    type: String,
+    default: '#000000'
+  },
+  margin: {
+    type: Number,
+    default: 10
+  },
+  marginTop: {
+    type: Number,
+    default: -1
+  },
+  marginBottom: {
+    type: Number,
+    default: -1
+  },
+  marginLeft: {
+    type: Number,
+    default: -1
+  },
+  marginRight: {
+    type: Number,
+    default: -1
+  },
+  useCanvas: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['rendered', 'error'])
+const instance = getCurrentInstance()!.proxy!
+
+const canvasId = ref('up-barcode-' + Date.now().toString())
+const barcodeImage = ref('')
+const showCanvas = ref(false)
+const canvasContext = ref<CanvasContext | null>(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
+const bars = ref<Array<UTSJSONObject>>([] as Array<UTSJSONObject>)
+const canvasWidth = ref(200)
+const canvasHeight = ref(80)
+const error = ref('')
+
+const marginTopValue = computed((): number => {
+  return props.marginTop >= 0 ? props.marginTop : props.margin
+})
+
+const marginBottomValue = computed((): number => {
+  return props.marginBottom >= 0 ? props.marginBottom : props.margin
+})
+
+const marginLeftValue = computed((): number => {
+  return props.marginLeft >= 0 ? props.marginLeft : props.margin
+})
+
+const marginRightValue = computed((): number => {
+  return props.marginRight >= 0 ? props.marginRight : props.margin
+})
+
+const displayText = computed((): string => {
+  return props.text.length > 0 ? props.text : stringValue(props.value)
+})
+
+const showTopText = computed((): boolean => {
+  return props.displayValue && props.textPosition == 'top' && error.value.length == 0
+})
+
+const showBottomText = computed((): boolean => {
+  return props.displayValue && props.textPosition != 'top' && error.value.length == 0
+})
+
+const showImage = computed((): boolean => {
+  return props.useCanvas == false && barcodeImage.value.length > 0 && error.value.length == 0
+})
+
+const rootStyle = computed((): UTSJSONObject => {
+  return {
+    width: canvasWidth.value.toString() + 'px',
+    minHeight: canvasHeight.value.toString() + 'px',
+    paddingTop: marginTopValue.value.toString() + 'px',
+    paddingBottom: marginBottomValue.value.toString() + 'px',
+    paddingLeft: marginLeftValue.value.toString() + 'px',
+    paddingRight: marginRightValue.value.toString() + 'px',
+    backgroundColor: props.background
+  } as UTSJSONObject
+})
+
+const barcodeStyle = computed((): UTSJSONObject => {
+  return {
+    width: props.width.toString() + 'px',
+    height: props.height.toString() + 'px',
+    backgroundColor: props.background
+  } as UTSJSONObject
+})
+
+const canvasStyle = computed((): UTSJSONObject => {
+  return {
+    width: canvasWidth.value.toString() + 'px',
+    height: canvasHeight.value.toString() + 'px'
+  } as UTSJSONObject
+})
+
+const imageStyle = computed((): UTSJSONObject => {
+  return {
+    width: canvasWidth.value.toString() + 'px',
+    height: canvasHeight.value.toString() + 'px'
+  } as UTSJSONObject
+})
+
+const textStyle = computed((): UTSJSONObject => {
+  const style = {
+    fontSize: props.fontSize.toString() + 'px',
+    lineHeight: (props.fontSize + props.textMargin).toString() + 'px',
+    color: props.lineColor,
+    textAlign: props.textAlign
+  } as UTSJSONObject
+  return style
+})
+
+const getBarStyle = (bar: UTSJSONObject): UTSJSONObject => {
+  return {
+    width: normalizeNumber(bar['width'], 1).toString() + 'px',
+    height: props.height.toString() + 'px',
+    backgroundColor: stringValue(bar['color'])
+  } as UTSJSONObject
+}
+
+const initCanvas = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    uni.createCanvasContextAsync({
+      id: canvasId.value.toString() as string.IDString,
+      component: instance,
+      success: (context: CanvasContext) => {
+        canvasContext.value = context
+        ctx.value = context.getContext('2d')
+        resolve()
+      },
+      fail: (err: UniError) => {
+        reject(err)
+      }
+    })
+  })
+}
+
+const getErrorMessage = (err: any | null): string => {
+  if (err == null) {
+    return ''
+  }
+  const errObj = err as UTSJSONObject
+  const message = errObj['message']
+  return message == null ? err.toString() : message.toString()
+}
+
+const createBars = (bits: string): Array<UTSJSONObject> => {
+  const list = [] as Array<UTSJSONObject>
+  if (bits.length == 0) {
+    return list
+  }
+  const moduleWidth = props.width / bits.length
+  let current = bits.substring(0, 1)
+  let count = 1
+  for (let i = 1; i < bits.length; i++) {
+    const bit = bits.substring(i, i + 1)
+    if (bit == current) {
+      count++
+    } else {
+      list.push({
+        color: current == '1' ? props.lineColor : props.background,
+        width: count * moduleWidth
+      } as UTSJSONObject)
+      current = bit
+      count = 1
+    }
+  }
+  list.push({
+    color: current == '1' ? props.lineColor : props.background,
+    width: count * moduleWidth
+  } as UTSJSONObject)
+  return list
+}
+
+const encodeCode128 = (data: string): string => {
+  const chars = " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~"
+  const codes = [] as Array<number>
+  let checksum = 104
+  codes.push(104)
+  for (let i = 0; i < data.length; i++) {
+    const code = chars.indexOf(data.substring(i, i + 1))
+    if (code < 0) {
+      throw new Error('Invalid character in CODE128')
+    }
+    codes.push(code)
+    checksum += code * (i + 1)
+  }
+  codes.push(checksum % 103)
+  codes.push(106)
+  const patterns = code128Patterns()
+  let barcode = ''
+  for (let i = 0; i < codes.length; i++) {
+    barcode += patterns[codes[i]]
+  }
+  return barcode + '00000'
+}
+
+const encodeCode39 = (data: string): string => {
+  const codes = code39Map()
+  const value = data.toUpperCase()
+  let barcode = stringValue(codes['*'])
+  for (let i = 0; i < value.length; i++) {
+    const char = value.substring(i, i + 1)
+    const code = codes[char]
+    if (code == null) {
+      throw new Error('Invalid character in CODE39')
+    }
+    barcode += '0' + code.toString()
+  }
+  return barcode + '0' + stringValue(codes['*'])
+}
+
+const encodeEAN13 = (data: string): string => {
+  if (!/^\d{13}$/.test(data)) {
+    throw new Error('EAN13 must be 13 digits')
+  }
+  let sum = 0
+  for (let i = 0; i < 12; i++) {
+    const digit = digitAt(data, i)
+    sum += i % 2 == 0 ? digit : digit * 3
+  }
+  const checkDigit = (10 - (sum % 10)) % 10
+  if (digitAt(data, 12) != checkDigit) {
+    throw new Error('Invalid EAN13 check digit')
+  }
+  const leftData = data.substring(1, 7)
+  const rightData = data.substring(7, 13)
+  const parity = [
+    'LLLLLL', 'LLGLGG', 'LLGGLG', 'LLGGGL', 'LGLLGG',
+    'LGGLLG', 'LGGGLL', 'LGLGLG', 'LGLGGL', 'LGGLGL'
+  ] as Array<string>
+  const odd = leftOddCodes()
+  const even = leftEvenCodes()
+  const right = rightCodes()
+  const pattern = parity[digitAt(data, 0)]
+  let barcode = '101'
+  for (let i = 0; i < leftData.length; i++) {
+    const digit = digitAt(leftData, i)
+    barcode += pattern.substring(i, i + 1) == 'L' ? odd[digit] : even[digit]
+  }
+  barcode += '01010'
+  for (let i = 0; i < rightData.length; i++) {
+    barcode += right[digitAt(rightData, i)]
+  }
+  return barcode + '101'
+}
+
+const encodeEAN8 = (data: string): string => {
+  if (!/^\d{8}$/.test(data)) {
+    throw new Error('EAN8 must be 8 digits')
+  }
+  let sum = 0
+  for (let i = 0; i < 7; i++) {
+    const digit = digitAt(data, i)
+    sum += digit * (i % 2 == 0 ? 3 : 1)
+  }
+  const checkDigit = (10 - (sum % 10)) % 10
+  if (digitAt(data, 7) != checkDigit) {
+    throw new Error('Invalid EAN8 check digit')
+  }
+  const odd = leftOddCodes()
+  const right = rightCodes()
+  let barcode = '101'
+  for (let i = 0; i < 4; i++) {
+    barcode += odd[digitAt(data, i)]
+  }
+  barcode += '01010'
+  for (let i = 4; i < 8; i++) {
+    barcode += right[digitAt(data, i)]
+  }
+  return barcode + '101'
+}
+
+const encodeEAN52 = (data: string, format: string): string => {
+  const length = format == 'EAN5' ? 5 : 2
+  if (data.length != length || !/^\d+$/.test(data)) {
+    throw new Error(format + ' must be ' + length.toString() + ' digits')
+  }
+  const codes = leftOddCodes()
+  let barcode = '1011'
+  for (let i = 0; i < data.length; i++) {
+    if (i > 0) {
+      barcode += '01'
+    }
+    barcode += codes[digitAt(data, i)]
+  }
+  return barcode
+}
+
+const encodeUPCA = (data: string): string => {
+  let value = data
+  if (/^\d{11}$/.test(value)) {
+    let sum = 0
+    for (let i = 0; i < 11; i++) {
+      const digit = digitAt(value, i)
+      sum += i % 2 == 0 ? digit * 3 : digit
+    }
+    value += ((10 - (sum % 10)) % 10).toString()
+  }
+  if (!/^\d{12}$/.test(value)) {
+    throw new Error('UPC-A must be 11 or 12 digits')
+  }
+  return encodeEAN13('0' + value)
+}
+
+const encodeUPCE = (data: string): string => {
+  let value = data
+  if (/^\d{7}$/.test(value)) {
+    let sum = 0
+    for (let i = 0; i < 7; i++) {
+      const digit = digitAt(value, i)
+      sum += i % 2 == 0 ? digit * 3 : digit
+    }
+    value += ((10 - (sum % 10)) % 10).toString()
+  }
+  if (!/^\d{8}$/.test(value)) {
+    throw new Error('UPC-E must be 7 or 8 digits')
+  }
+  const odd = leftOddCodes()
+  const even = leftEvenCodes()
+  const middle = value.substring(1, 7)
+  const checkDigit = value.substring(7, 8)
+  let pattern = 'EEOOOO'
+  if (checkDigit == '0' || checkDigit == '1' || checkDigit == '2' || checkDigit == '3') {
+    pattern = 'EEEEOO'
+  } else if (checkDigit == '4') {
+    pattern = 'EEEOOO'
+  }
+  let barcode = '101'
+  for (let i = 0; i < middle.length; i++) {
+    const digit = digitAt(middle, i)
+    barcode += pattern.substring(i, i + 1) == 'E' ? even[digit] : odd[digit]
+  }
+  return barcode + '010101101'
+}
+
+const encodeBarcode = (value: string, format: string): string => {
+  switch (format) {
+    case 'CODE39':
+      return encodeCode39(value)
+    case 'EAN13':
+      return encodeEAN13(value)
+    case 'EAN8':
+      return encodeEAN8(value)
+    case 'EAN5':
+    case 'EAN2':
+      return encodeEAN52(value, format)
+    case 'UPC':
+    case 'UPCA':
+      return encodeUPCA(value)
+    case 'UPCE':
+      return encodeUPCE(value)
+    case 'CODE128':
+    case 'auto':
+    default:
+      return encodeCode128(value)
+  }
+}
+
+const drawCanvasText = (context: CanvasRenderingContext2D, barcodeY: number, textHeight: number): void => {
+  const text = displayText.value
+  const textX = props.textAlign == 'left'
+    ? marginLeftValue.value
+    : (props.textAlign == 'right' ? canvasWidth.value - marginRightValue.value : canvasWidth.value / 2)
+  let textY = props.textPosition == 'top'
+    ? marginTopValue.value + props.fontSize
+    : barcodeY + props.height + props.textMargin + props.fontSize
+  if (textY > canvasHeight.value - marginBottomValue.value) {
+    textY = canvasHeight.value - marginBottomValue.value - 2
+  }
+  context.fillStyle = props.lineColor
+  context.font = props.fontOptions.length > 0
+    ? props.fontOptions + ' ' + props.fontSize.toString() + 'px ' + props.font
+    : props.fontSize.toString() + 'px ' + props.font
+  context.textAlign = props.textAlign == 'left' || props.textAlign == 'right' ? props.textAlign : 'center'
+  context.fillText(text, textX, textY)
+}
+
+const drawCanvasBarcode = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const context = ctx.value
+    if (context == null) {
+      reject(new Error('Canvas is not ready'))
+      return
+    }
+    try {
+      const bits = encodeBarcode(stringValue(props.value), props.format)
+      context.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
+      context.fillStyle = props.background
+      context.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+      let barcodeY = marginTopValue.value
+      const textHeight = props.displayValue ? props.fontSize + props.textMargin : 0
+      if (props.displayValue && props.textPosition == 'top') {
+        barcodeY += textHeight
+      }
+      const moduleWidth = props.width / Math.max(1, bits.length)
+      context.fillStyle = props.lineColor
+      let x = marginLeftValue.value
+      for (let i = 0; i < bits.length; i++) {
+        if (bits.substring(i, i + 1) == '1') {
+          context.fillRect(x, barcodeY, moduleWidth + 0.5, props.height)
+        }
+        x += moduleWidth
+      }
+      if (props.displayValue) {
+        drawCanvasText(context, barcodeY, textHeight)
+      }
+      context.draw()
+      resolve()
+    } catch (err) {
+      reject(err)
+    }
+  })
+}
+
+const exportImage = (): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    showCanvas.value = true
+    // 等待条件渲染的画布提交到组件宿主视图后再查询节点。
+    instance.$nextTick(() => {
+      initCanvas().then(() => {
+        drawCanvasBarcode().then(() => {
+          const canvas = canvasContext.value
+          if (canvas == null) {
+            showCanvas.value = false
+            reject(new Error('Canvas is not ready'))
+            return
+          }
+          const dataUrl = canvas.toDataURL('image/png', 1)
+          showCanvas.value = false
+          emit('rendered', { type: 'image', value: props.value, path: dataUrl } as UTSJSONObject)
+          resolve(dataUrl)
+        }).catch((err: any | null) => {
+          showCanvas.value = false
+          reject(err)
+        })
+      }).catch((err: any | null) => {
+        showCanvas.value = false
+        reject(err)
+      })
+    })
+  })
+}
+
+const generateBarcode = (): void => {
+  try {
+    error.value = ''
+    const bits = encodeBarcode(stringValue(props.value), props.format)
+    bars.value = createBars(bits)
+    const textHeight = props.displayValue ? props.fontSize + props.textMargin : 0
+    canvasWidth.value = props.width + marginLeftValue.value + marginRightValue.value
+    canvasHeight.value = props.height + marginTopValue.value + marginBottomValue.value + textHeight
+    if (props.useCanvas == false) {
+      nextTick(() => {
+        exportImage().then((path: string) => {
+          barcodeImage.value = path
+        }).catch((err: any | null) => {
+          emit('error', err)
+        })
+      })
+    } else {
+      barcodeImage.value = ''
+    }
+    emit('rendered', {
+      type: props.useCanvas == false ? 'image' : 'view',
+      value: props.value,
+      format: props.format,
+      path: barcodeImage.value
+    } as UTSJSONObject)
+  } catch (err) {
+    const message = getErrorMessage(err)
+    error.value = message.length > 0 ? message : '生成条码失败'
+    bars.value = [] as Array<UTSJSONObject>
+    emit('error', {
+      message: error.value,
+      value: props.value,
+      format: props.format
+    } as UTSJSONObject)
+  }
+}
+
+function toTempFilePath(options: UTSJSONObject = {} as UTSJSONObject): void {
+  const success = options['success'] as ((res: UTSJSONObject) => void) | null
+  const fail = options['fail'] as ((err: any | null) => void) | null
+  exportImage().then((path: string) => {
+    if (success != null) {
+      success({ tempFilePath: path, path } as UTSJSONObject)
+    }
+  }).catch((err: any | null) => {
+    if (fail != null) {
+      fail(err)
+    } else {
+      emit('error', err)
+    }
+  })
+}
+
+watch((): any => props.value, () => { generateBarcode() })
+watch((): string => props.format, () => { generateBarcode() })
+watch((): number => props.width, () => { generateBarcode() })
+watch((): number => props.height, () => { generateBarcode() })
+watch((): boolean => props.displayValue, () => { generateBarcode() })
+watch((): string => props.text, () => { generateBarcode() })
+watch((): string => props.textPosition, () => { generateBarcode() })
+watch((): number => props.textMargin, () => { generateBarcode() })
+watch((): number => props.fontSize, () => { generateBarcode() })
+watch((): string => props.background, () => { generateBarcode() })
+watch((): string => props.lineColor, () => { generateBarcode() })
+watch((): number => props.margin, () => { generateBarcode() })
+
+onMounted((): void => {
+  generateBarcode()
+})
+
+defineExpose({
+  canvasId,
+  barcodeImage,
+  showCanvas,
+  canvasContext,
+  ctx,
+  bars,
+  canvasWidth,
+  canvasHeight,
+  error,
+  marginTopValue,
+  marginBottomValue,
+  marginLeftValue,
+  marginRightValue,
+  displayText,
+  showTopText,
+  showBottomText,
+  showImage,
+  rootStyle,
+  barcodeStyle,
+  canvasStyle,
+  imageStyle,
+  textStyle,
+  getBarStyle,
+  generateBarcode,
+  toTempFilePath,
+  exportImage,
+  initCanvas,
+  drawCanvasBarcode,
+  drawCanvasText,
+  getErrorMessage,
+  createBars,
+  encodeBarcode,
+  encodeCode128,
+  encodeCode39,
+  encodeEAN13,
+  encodeEAN8,
+  encodeEAN52,
+  encodeUPCA,
+  encodeUPCE
+})
+</script>
 
 <style scoped lang="scss">
 .up-barcode {