Huawei cloud custom template identification is a process control system that serves the AI field. Let’s take a look at the interface operation example of one module. As shown in the figure below, for high-precision image recognition, we need to process the image style in order to obtain better model training data and high-precision recognition results. We implement image processing requirements for three scenarios:When the template is initialized, the image is loaded in the visual area and rendered:

1. Drag and move pictures

  /** * drag image: *@param e
   * @returns* /
  public dragImage(e) {
    e.stopPropagation();     // Prevent events from bubbling
    this.editImgWrapper = this.el.nativeElement.querySelector('#editImgWrapper');// Get the image information
    let isDraging = false;   // Drag the flag
    let nodePositon = {      // The coordinate position of the current image in the viewable area
      left: parseFloat(this.editImgWrapper.style.left.replace('px'.' ')),
      top: parseFloat(this.editImgWrapper.style.top.replace('px'.' ')),};this.deafultPosition = {     // The coordinates of the mouse over the visual window while sliding (pure numbers)
      left: e.clientX,
      top: e.clientY,
    };
    let movePosition = {
      left: 0.top: 0};document.onmousedown = e= > {
       isDraging = true;
    }
    / / move events
    document.onmousemove = e= > {
      if(! isDraging)return;
      e.stopPropagation();
      movePosition.left = e.clientX - this.deafultPosition.left;
      movePosition.top = e.clientY - this.deafultPosition.top;
      this.editImgWrapper.style.left = nodePositon.left + movePosition.left + 'px';
      this.editImgWrapper.style.top = nodePositon.top + movePosition.top + 'px';
    };
    // Release the mouse
    document.onmouseup = function (event) {
      // Release event
      isDraging = false;
      event.stopPropagation();
      document.onmousemove = null;
      document.onmouseup = null;
    };
  }
Copy the code

2. Select a box in an area of the picture

  private toDrawImage = e= > {
    // The position of the annotation box relative to the image
    let nodePositon = {
      left: e.pageX - this.editImgWrapper.getBoundingClientRect().left,
      top: e.pageY - this.editImgWrapper.getBoundingClientRect().top,
    };
    // Mouse down position
    let mousePosition = {
      left: e.clientX,
      top: e.clientY,
    };
    // The distance the mouse moves
    let movePosition = {
      left: 0.top: 0};// Initialize the position and width of the TMP annotation box
    let tmpDivStyles = {
      top: ' '.left: ' '.width: ' '.height: ' '};// The resulting width and height of the annotation box
    let width;
    let height;
    // Add the mouse move event to the document stream:
    document.onmousemove = e= > {
      e.stopPropagation();
      movePosition.left = (e.clientX - mousePosition.left) / this.editImgWrapper.scaleRatio;
      movePosition.top = (e.clientY - mousePosition.top) / this.editImgWrapper.scaleRatio;
      width = Math.abs(movePosition.left);
      height = Math.abs(movePosition.top);
      if (e.clientY > mousePosition.top) {
        tmpDivStyles.top = nodePositon.top / this.editImgWrapper.scaleRatio + 'px';
      } else {
        tmpDivStyles.top =
          (e.clientY - this.editImgWrapper.getBoundingClientRect().top) / this.editImgWrapper.scaleRatio + 'px';
      }
      if (e.clientX < mousePosition.left) {
        tmpDivStyles.left =
          (e.clientX - this.editImgWrapper.getBoundingClientRect().left) / this.editImgWrapper.scaleRatio + 'px';
      } else {
        tmpDivStyles.left = nodePositon.left / this.editImgWrapper.scaleRatio + 'px';
      }
      tmpDivStyles.width = width + 'px';
      tmpDivStyles.height = height + 'px';
      this.tmpDivStyles = tmpDivStyles;         // Record box selected style size and position area
    };

    document.onmouseup = event= > {
      // Release event
      event.stopPropagation();
      document.onmousemove = null;
      document.onmouseup = null;
      this.addClip();              // Picture drawing
    };
  };
Copy the code
  // Capture the picture of the selected area of the box, and call high-precision recognition of the picture content, and echo the selected area of the box
  private addClip = () = > {
    let tmpStyles = this.tmpDivStyles;
    let position = {
      top: parseFloat(tmpStyles.top.replace('px'.' ')),
      left: parseFloat(tmpStyles.left.replace('px'.' ')),
      height: parseFloat(tmpStyles.height.replace('px'.' ')),
      width: parseFloat(tmpStyles.width.replace('px'.' ')),};let list = [];
    // The generated 64-bit picture object is used here
    let image = this.generateImg(position, this.editImgObj, this.editImgCanvas);
    let res: any = await this.service.generalOcr(image, true);   // Call the high-precision identification interface
    // Further process the box selection area in the output:. }};Copy the code
  // Generate images based on coordinates and width and height
  private generateImg(position, imgobj, canvasObj) {
    canvasObj.width = position.width;
    canvasObj.height = position.height;
    let ctx = canvasObj.getContext('2d');
    ctx.drawImage(
      imgobj,
      position.left,
      position.top,
      position.width,
      position.height,
      0.0,
      position.width,
      position.height
    );
    let base64Img = canvasObj.toDataURL('image/jpg').split('base64,') [1].toString();
    return base64Img;
  }
Copy the code

3. Move the box to select the recognition area and change the content in the recognition area:

  public moveBox(e, item, index) {
    e.stopPropagation();
    // Select the current box to move:
    let thisBox = this.el.nativeElement.querySelector('.anchor-box-' + index);
    let nodePositon = {
      left: parseFloat(thisBox.style.left.replace('px'.' ')),
      top: parseFloat(thisBox.style.top.replace('px'.' ')),
      clientWidth: thisBox.getBoundingClientRect().width,
      clientHeight: thisBox.getBoundingClientRect().height,
    };
    let mousePosition = {
      left: e.clientX,
      top: e.clientY,
    };
    let movePosition = {
      left: 0.top: 0};let maxPosition = {
      left: this.editImgWrapper.clientWidth - thisBox.clientWidth,
      top: this.editImgWrapper.clientHeight - thisBox.clientHeight
    };
    document.onmousemove = e= > {
      e.stopPropagation();
      movePosition.left = (e.clientX - mousePosition.left) / this.editImgWrapper.scaleRatio;
      movePosition.top = (e.clientY - mousePosition.top) / this.editImgWrapper.scaleRatio;
      thisBox.style.left = Math.min(Math.max(0, nodePositon.left + movePosition.left), maxPosition.left) + 'px';
      thisBox.style.top = Math.min(Math.max(0, nodePositon.top + movePosition.top), maxPosition.top) + 'px';
    };
    document.onmouseup = event= > {
      event.stopPropagation();
      if (Math.abs(movePosition.left) > 1 || Math.abs(movePosition.top) > 1) {
        this.setClip(item, thisBox);    // Redraw and echo
      }
      document.onmousemove = null;
      document.onmouseup = null;
    };
  }
Copy the code