# node-demo

**Repository Path**: syysummer/node-demo

## Basic Information

- **Project Name**: node-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-25
- **Last Updated**: 2023-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目依赖安装
```
npm install
```

### 项目运行
```
npm run start
```

### 运行端口号： 5000

### 接口介绍
```
'/upload_img' 图片上传接口
'/node/generate_gcode' 切片接口
```

### 前端使用
```javascript
  /*开始切片*/
  async handleSlice () {
    if (this.isSliceLoading) return
    if (!this.rightList.length) return
    const currentObj = this.dragerComRefs[this.activeIndex]
    // 时间的图片名
    const filename = currentObj.$props.element.filename || this.getCurrentTimeWithRandomLetters() + '.jpg'
    // 图片的url地址
    const imgPath = currentObj.$props.element.content
    const blobResult: any = await this.getBase64BlobImage(imgPath)
    if (!blobResult) return
    const formData = new FormData()
    formData.append('file', blobResult.imageBlob, filename)
    // 先上传图片
    const baseUrl = 'http://127.0.0.1:5000' // 后端node服务地址
    await this.$httpClient({
      method: 'post',
      url: `${baseUrl}/upload_img`,
      headers: { 'Content-Type': 'multipart/form-data' },
      data: formData
    }).finally(() => {
      // 处理切片逻辑开始
      const modelInfo = {
        modelID: 'modelID0',
        modelName: filename,
        headType: 'laser',
        sourceType: 'raster',
        mode: 'bw',
        hideFlag: false,
        sourceHeight: currentObj.$props.element.defaultHeight, // 图片的初始宽 根据naturalWidth获取
        sourceWidth: currentObj.$props.element.defaultWidth, // // 图片的初始高 根据naturalHeight获取
        originalName: filename,
        uploadName: filename,
        transformation: { // positionX positionY 雕刻的中心
          positionX: 110,
          positionY: 110,
          positionZ: 0,
          rotationX: 0,
          rotationY: 0,
          rotationZ: 0,
          scaleX: Number(currentObj.currentDragData.width / currentObj.$props.element.defaultWidth),
          scaleY: Number(currentObj.currentDragData.height / currentObj.$props.element.defaultHeight),
          scaleZ: 1,
          uniformScalingState: true,
          flip: 0,
          width: currentObj.currentDragData.width,
          height: currentObj.currentDragData.height
        },
        config: { invert: false, bwThreshold: 168 },
        id: '2a4c1335-409f-4344-a12f-41cb4fe36e27',
        printOrder: 1,
        needPreview: true,
        gcodeConfig: {
          direction: 'Horizontal',
          density: 8,
          jogSpeed: 3000,
          workSpeed: 1800,
          plungeSpeed: 896745231,
          dwellTime: 896745231,
          fixedPowerEnabled: true, // 设置为true才能生效
          fixedPower: 60,
          multiPassEnabled: false,
          multiPasses: 1,
          multiPassDepth: 1,
          style: 'grbl'
        },
        toolPathFilename: null,
        gcodeConfigPlaceholder: {
          jogSpeed: 'jogSpeed',
          workSpeed: 'workSpeed',
          dwellTime: 'dwellTime',
          plungeSpeed: 'plungeSpeed'
        }
      }
      this.isSliceLoading = true
      this.$httpClient({
        method: 'post',
        url: `${baseUrl}/node/generate_gcode`,
        headers: {"Content-Type": "application/json"},
        data: {
          modelInfo
        }
      }).finally(() => this.isSliceLoading = false)
      .then((res) => {
        const content = res.data?.data?.content || {}
        const gcodeFile = content.gcodeFile || null
        if (gcodeFile) {
          this.$toast.success(`${gcodeFile.uploadName}生成成功！`)
        }
      }).catch(() => {
        // this.$toast.fail(this.$t('Common.failure'))
      })
      // 处理切片逻辑结束
    }).catch(() => {})
  }

  /*将图片状态为base64资源，再转化成formData*/
  getBase64BlobImage (src) {
    return new Promise(resolve => {
      const img = new Image()
      img.crossOrigin = ''
      img.src = src
      img.onload = () => {
        /*图片转base64*/
        const canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        const ctx:any = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
        const base64Data = canvas.toDataURL('image/jpeg')
        /*base64转-Blob*/
        const dataArr: any[] = base64Data.split(','); // 根据,来分隔
        const imageType = dataArr[0].match(/:(.*?);/)[1]; // 获取文件类型。使用正则捕获 image/jpeg
        const textData = window.atob(dataArr[1]); // 使用atob() 将base64 转为文本文件
        const arrayBuffer = new ArrayBuffer(textData.length); // 创建一个二进制数据缓冲区，可以理解为一个数组
        const uint8Array = new Uint8Array(arrayBuffer); // 创建一个类型化数组对象，可以理解为上面的数组的成员，给这个对象赋值就会放到上面的数组中。
        for(let i = 0; i < textData.length; i++) {
          uint8Array[i] = textData.charCodeAt(i); // 将文本文件转为UTF-16的ASCII, 放到类型化数组对象中
        }
        resolve({
          imageBlob: new Blob([arrayBuffer], { type: imageType }),
          imageType: imageType.slice(6)
        })
      }
      /*图片加载异常捕获*/
      img.onerror = () => {
        this.$toast.fail(this.$t('Common.failure'))
        resolve(false)
      }
    })
  }

```