html2canvas 生成图片 和保存到后台

 安装

npm install --save html2canvas

使用

<el-result v-show="BillInfo.show"  title="分享产品" :subTitle="BillInfo.billUrl" id="capture">
        <template slot="icon" style="">
          <el-image v-if="BillInfo.billUrl != null" style="width: 650px; height:500px;background-color: white;margin:10px;border-radius:15px;" :src="BillInfo.billUrl"></el-image>
          <div v-else style="width: 650px; height: 500px;background-color: white;margin:10px;border-radius:15px;" >
              <el-image :src="BillInfo.image" style="width:100%;height:80%;border-radius:15px;"></el-image>
              <div style="display: flex;margin-top: 10px;" >
               <el-image style="width: 60px; height: 60px;margin-left: 10px;" :src="BillInfo.avatarUrl" ></el-image>
               <div style="width:70%;text-align:left;margin-left:14px;">
                 <div style="font-size: 20px;">{{BillInfo.nickname}} {{BillInfo.invite}}</div>
                 <div style="font-size: 18px;">{{BillInfo.activityIntroduction}}</div>
                 <div style="text-align:right;color: red;">扫码进入商品详情</div>
                </div>
                <el-image style="width: 100px; height: 100px;top: -12px;right: -15px;" :src="BillInfo.qrCodeUrl" ></el-image>
              </div>
          </div>
        </template>
        <template slot="extra">
          <el-button type="primary" size="medium" @click="BillInfo.show = false;">关闭</el-button>
        </template>
      </el-result>

getBillInfo(id){
        var that=this;
        getProductBillInfo(id).then(res => {
        this.BillInfo={
          show:true,
          billUrl:res.billUrl,
          qrCodeUrl:res.qrCodeUrl,
          avatarUrl:res.avatarUrl,
          nickname:res.nickname,
          invite:res.invite,
          activityIntroduction:res.activityIntroduction,
          image:res.image,
          billPath:res.billPath,
          attachment:res.attachment
        }
        if(this.BillInfo.billUrl != null){
            return;
        }
        //生成图片保存到服务器
        setTimeout(
          function(){
          var div=document.querySelector("#capture");
            var div1=div.querySelector("div");
            console.log(div1)
            //console.log(ref)
            html2canvas(div1,{
              useCORS: true,//处理图片显示不出来
              allowTaint: true,//处理图片显示不出来
              scale: 2, // 处理模糊问题,放大倍数
              dpi: 300, // 处理模糊问题
            }).then(canvas => {
              const dataURL = canvas.toDataURL('image/jpeg')
              //console.log(dataURL)
              //document.querySelector("#container").appendChild(canvas);

              var date={
                 "billPath":that.BillInfo.billPath,
                 "attachment":that.BillInfo.attachment,
                 "imgBase64":dataURL
              }
              saveProductBillInfo(date).then(res => {
                that.BillInfo.billUrl = res;
              }).catch(err => {
                  console.log(err.response.data.message)
                })
            });}
        ,3000);
      }).catch(err => {
        console.log(err.response.data.message)
      })
    }

后端保存图片

/**
     * 保存前台生成的图片和表信息
     * @param param
     * @return
     */
    @ApiOperation(value = "获取生成商品分享海报图片的全部参数")
    @PostMapping(value = "/yxStoreProduct/saveProductBillInfo")
    public ApiResult<String> saveProductBillInfo(@RequestBody SaveProductBillInfoParam param) throws IOException {
        //保存文件
        String imgBase64 = param.getImgBase64();
        imgBase64=imgBase64.replace(" ", "+");
        imgBase64=imgBase64.replace("data:image/jpeg;base64,", "");
        byte[] decode = Base64.decode(imgBase64);
        File file = new File(param.getBillPath());
        //判断文件夹是否存在
        String name = FileNameUtil.getName(file);
        String s = param.getBillPath().replaceAll(name, "");
        File ss=new File(s);
        if(!ss.exists()){
            ss.mkdirs();
        }
        FileOutputStream fileOutputStream = new FileOutputStream(file);
        BufferedOutputStream bufferedOutputStream = new BufferedOutputStream(fileOutputStream);
        bufferedOutputStream.write(decode);
        fileOutputStream.close();
        bufferedOutputStream.close();

        //保存表内容
        YxSystemAttachment attachment = param.getAttachment();
        systemAttachmentService.save(attachment);


        String apiUrl = systemConfigService.getData(SystemConfigConstants.API_URL);
        if(StrUtil.isEmpty(apiUrl)){
            throw new YshopException("未配置api地址");
        }
        String spreadUrl = "";
        spreadUrl = apiUrl + "/api/file/" + attachment.getSattDir();

        return ApiResult.ok(spreadUrl);
    }