點擊編輯频轿，彈出窗口，上傳授權(quán)書的同時根據(jù)執(zhí)照全稱生成印章烁焙，印章轉(zhuǎn)化成base64傳給后臺航邢。

image.png

image.png

彈窗

   <Modal
        :mask-closable="false"
        @on-cancel="modalStatusHide($event)"
        v-model="add_modal"
        :title="merchant_id ? '修改商戶信息' : '添加商戶'"
        width="570"
      >
        <Form
          ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="108"
        >
          <FormItem label="銷售人員" prop="sale_id">
            <Select
              clearable
              ref="userSelect"
              v-model="formValidate.sale_id"
              filterable
              placeholder="請選擇"
            >
              <Option v-for="item in saleList" :key="item.id" :value="item.id"
                >{{ item.name }}（用戶ID：{{ item.id }}）
              </Option>
            </Select>
          </FormItem>
          <FormItem label="客服人員" prop="customer_id">
            <Select
              clearable
              ref="userSelect"
              v-model="formValidate.customer_id"
              filterable
              placeholder="請選擇"
            >
              <Option
                v-for="item in customerList"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}（用戶ID：{{ item.id }}）
              </Option>
            </Select>
          </FormItem>
          <FormItem label="團(tuán)隊" prop="agent_id">
            <Select
              clearable
              ref="userSelect"
              v-model="formValidate.agent_id"
              filterable
              placeholder="請選擇"
            >
              <Option v-for="item in agentList" :key="item.id" :value="item.id"
                >{{ item.name }}（用戶ID：{{ item.id }}）
              </Option>
            </Select>
          </FormItem>
          <FormItem label="合同編號" prop="contract_number">
            <Input
              v-model="formValidate.contract_number"
              placeholder="請輸入合同編號"
            ></Input>
          </FormItem>
          <FormItem label="上傳文件" prop="contract_url">
            <Upload
              ref="upload"
              :action="uploadUrl"
              :on-success="handleUpload"
              :show-upload-list="false"
            >
              <Button icon="ios-cloud-upload-outline">附件上傳</Button>
            </Upload>
            <p style="cursor: pointer" v-if="!formValidate.contract_url == ''">
              <a :href="formValidate.contract_url" target="_blank" download>{{
                contract_urlName
              }}</a>
              <Icon
                v-if="!formValidate.contract_url == ''"
                type="md-close"
                size="16"
                color="#ff7632"
                @click="remove"
              />
            </p>
          </FormItem>
          <FormItem label="執(zhí)照全稱" prop="license_full_name">
            <Input
              v-model="formValidate.license_full_name"
              placeholder="請輸入執(zhí)照全稱"
            ></Input>
          </FormItem>
          <FormItem label="公司簡稱" prop="company_abbr">
            <Input
              v-model="formValidate.company_abbr"
              placeholder="請輸入公司簡稱"
            ></Input>
          </FormItem>
          <FormItem label="公司負(fù)責(zé)人" prop="charge_name">
            <Input
              v-model="formValidate.charge_name"
              placeholder="請輸入公司負(fù)責(zé)人"
            ></Input>
          </FormItem>
          <FormItem label="負(fù)責(zé)人手機(jī)號碼" prop="charge_mobile">
            <Input
              :maxlength="mobileLength"
              v-model="formValidate.charge_mobile"
              placeholder="請輸入負(fù)責(zé)人手機(jī)號"
            ></Input>
            <p style="color: #999999" class="tips">
              *該手機(jī)號將作為商戶賬號的最高權(quán)限
            </p>
          </FormItem>
          <FormItem label="營業(yè)執(zhí)照" prop="license_url">
            <Input
              style="display: none"
              v-model="formValidate.license_url"
              placeholder
            ></Input>
            <Upload
              :show-upload-list="show_upload_list"
              :on-success="upSuccess"
              :action="uploadUrl"
              accept="image/png, image/jpeg"
            >
              <div class="license-box">
                <img
                  v-if="formValidate.license_url"
                  :src="formValidate.license_url"
                  alt
                />
                <p v-else>
                  <Icon type="ios-cloud-upload-outline" />
                  <span>支持格式：jpg、png</span>
                </p>
              </div>
            </Upload>
          </FormItem>
          <FormItem
            style="display: inline-block"
            label="授權(quán)書"
            prop="empower_url"
          >
            <Input
              style="display: none"
              v-model="formValidate.empower_url"
              placeholder
            ></Input>
            <Upload
              :show-upload-list="show_upload_list"
              :on-success="upSuccess_sqs"
              :action="uploadUrl_sqs"
              accept="image/png, image/jpeg"
            >
              <div class="license-box">
                <img
                  v-if="formValidate.empower_url"
                  :src="formValidate.empower_url"
                  alt
                />
                <p v-else>
                  <Icon type="ios-cloud-upload-outline" />
                  <span>支持格式：jpg骄蝇、png</span>
                </p>
              </div>
            </Upload>
          </FormItem>
          <FormItem
            style="display: inline-block; width: 100px"
            label="印章"
            prop="seal"
          >
            <div class="license-box">
              <canvas id="canvas" width="250" height="250"></canvas>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="hideAddModal">取消</Button>
          <Button @click="saveHandle" type="primary" class="btn-warning"
            >保存</Button
          >
        </div>
      </Modal>

data

  //圖片
      uploadUrl: baseUrl + "common/upload/store",
      //授權(quán)書
      uploadUrl_sqs: baseUrl + "common/upload/store",
      add_modal: false,
      show_upload_list: false,
      contract_urlName: "",
      formValidate: {
        //執(zhí)照全稱
        license_full_name: "",
        company_abbr: "",
        charge_name: "",
        charge_mobile: "",
        license_url: "",
        sale_id: "",
        customer_id: "",
        agent_id: "",
        contract_number: "",
        contract_url: "",
        empower_url: "",
        seal: ""
      },
      ruleValidate: {
        license_full_name: [
          { required: true, message: "執(zhí)照全稱不能為空", trigger: "focus" },
        ],
        contract_url: [
          { required: true, message: "上傳文件不能為空", trigger: "focus" },
        ],
        company_abbr: [
          {
            required: true,
            message: "統(tǒng)一社會信用代碼不能為空",
            trigger: "focus",
          },
        ],
        charge_name: [
          { required: true, message: "請選擇經(jīng)營者", trigger: "focus" },
        ],
        charge_mobile: [
          { required: true, message: "請上傳營業(yè)執(zhí)照", trigger: "focus" },
        ],
      },

methods

methods:{
  createSeal() {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      // 繪制印章邊框   
      var width = canvas.width / 2;
      var height = canvas.height / 2;
      context.lineWidth = 7;
      context.strokeStyle = "#f00";
      context.beginPath();
      context.arc(width, height, 110, 0, Math.PI * 2);
      context.stroke();

      //畫五角星
      create5star(context, width, height, 20, "#f00", 0);

      // 繪制印章名稱   
      context.font = '16px Helvetica';
      context.textBaseline = 'middle';//設(shè)置文本的垂直對齊方式
      context.textAlign = 'center'; //設(shè)置文本的水平對對齊方式
      context.lineWidth = 1;
      context.fillStyle = '#f00';
      let name = "驗收專用章"
      context.fillText(name, width, height + 55);

      // 繪制印章單位   
      context.translate(width, height);// 平移到此位置,
      context.font = '26px Helvetica'
      var count = this.formValidate.license_full_name.length;// 字?jǐn)?shù)   
      var angle = 4 * Math.PI / (3 * (count - 1));// 字間角度   
      var chars = this.formValidate.license_full_name.split("");
      console.log(chars, "執(zhí)照全稱")
      var c;
      for (var i = 0; i < count; i++) {
        c = chars[i];// 需要繪制的字符   
        if (i == 0)
          context.rotate(5 * Math.PI / 6);
        else
          context.rotate(angle);
        context.save();
        context.translate(90, 0);// 平移到此位置,此時字和x軸垂直   
        context.rotate(Math.PI / 2);// 旋轉(zhuǎn)90度,讓字平行于x軸   
        context.fillText(c, 0, 5);// 此點為字的中心點   
        context.restore();
      }

      //繪制五角星  
      /** 
       * 創(chuàng)建一個五角星形狀. 該五角星的中心坐標(biāo)為(sx,sy),中心到頂點的距離為radius,rotate=0時一個頂點在對稱軸上 
       * rotate:繞對稱軸旋轉(zhuǎn)rotate弧度 
       */
      function create5star(context, sx, sy, radius, color, rotato) {
        context.save();
        context.fillStyle = color;
        context.translate(sx, sy);//移動坐標(biāo)原點  
        context.rotate(Math.PI + rotato);//旋轉(zhuǎn)  
        context.beginPath();//創(chuàng)建路徑  
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 5 * 4;
        for (var i = 0; i < 5; i++) {//畫五角星的五條邊  
          var x = Math.sin(i * dig);
          var y = Math.cos(i * dig);
          context.lineTo(x * radius, y * radius);
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore();
      }
      var saveImage = canvas.toDataURL('image/png')
      this.formValidate.seal = saveImage.substring(22)
    },
    //授權(quán)書
    upSuccess_sqs(response) {
      this.formValidate.empower_url = response.data.url;
      if (response.message == "success") {
        this.createSeal()
      }

    },
  // 編輯
    editHandle(row) {
      console.log(row);
      merchantDetail({ merchant_id: row.id }).then((res) => {
        console.log(res.data.data);
        this.merchant_id = row.id;
        let detail = res.data.data;
        this.formValidate.sale_id = detail.sale_id || "";
        this.formValidate.customer_id = detail.customer_id || "";
        this.formValidate.agent_id = detail.agent_id || "";
        this.formValidate.license_full_name = detail.license_full_name;
        this.formValidate.company_abbr = detail.company_abbr;
        this.formValidate.charge_name = detail.charge_name;
        this.formValidate.charge_mobile = detail.charge_mobile;
        this.formValidate.license_url = detail.license_url;
        this.formValidate.empower_url = detail.empower_url;
        this.formValidate.contract_number = detail.contract_number || "";
        if (detail.contract_url) {
          let search = "/";
          this.formValidate.contract_url = detail.contract_url;
          let start = detail.contract_url.lastIndexOf(search);
          this.contract_urlName = detail.contract_url.slice(
            start + 1
          );
        } else {
          this.formValidate.contract_url = ""
          this.contract_urlName = ""
        }
        this.add_modal = true;
        var canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        canvas.width = canvas.width;
        canvas.height = canvas.height;

      });
    },
}

遇到的問題：每次打開彈窗會重復(fù)繪制印章
解決辦法：

1. //清除后的樣式保留
     content.clearRect(0,0,canvas.width,canvas.height);//清除一個矩形區(qū)域
2.//原來設(shè)置的樣式不保留
     canvas.width=canvas.width;
      canvas.height=canvas.height;
      content.fillRect(125,125,100,100);//清除路徑
      // 區(qū)別
     1.前一種方法 由 2d渲染上下文來操作膳殷；后一種方法，直接設(shè)置的是canvas
      2.前一種方法九火，清除一個矩形區(qū)域赚窃，會保留原有的樣式，