renwu

litian

2024-09-06 266c7278841d2cbae5e9ab969ffd2efae1d0dda5

 pages/digitalCourses/digitalCoursesDetails/index.js

@@ -2,7 +2,7 @@
const app = getApp()
import SparkMD5 from 'spark-md5'
import FormData from '../../../utils/formdata/index.js';
// import Wxml2Canvas from 'wxml2canvas';
import Wxml2Canvas from 'wxml2canvas';
import {
  worksDataBytool
} from "../../../assets/js/toolClass.js";
@@ -98,8 +98,9 @@
    publishingUnit: '',
    pubCertificateHide: true,
    cbzsImg: '', //出版证书base64
    rzzsImg: '' //认证证书base64

    rzzsImg: '', //认证证书base64
    imageWidth: '', //画在画布上的图片的宽度
    imageHeight: '', //画在画布上的图片的高度
  },
  formatDate(dateString) {
    if (!dateString) {
@@ -282,7 +283,7 @@
          expire: res.false
        })
      }
      res.datas.publicationDate = moment(res.datas.publicationDate).format('YYYY年MM月DD日')
      res.datas.publicationDate = moment(res.datas.publicationDate).format('YYYY年MM月')
      res.datas.price = res.datas.price.toFixed(2)

      wx.setNavigationBarTitle({
@@ -310,6 +311,7 @@
      }
      this.getAboutBook(res.datas.productLinkInfo[res.datas.productLinkInfo.length - 1].LinkPath)
      this.getCertificateList()
      res.datas.content = res.datas.content.replace('../', app.config.requestCtx + '/')
      this.setData({
        lecturerList: lecturer,
        digitalsData: res.datas,
@@ -346,7 +348,7 @@
      tabValue: value
    })
    if (this.data.tabValue == 1) {
      // this.saveAsImage()
      this.saveAsImage()
    }
    if (this.data.tabValue == 2) {
      this.getResource()
@@ -823,48 +825,69 @@
  },
  //申请证书
  async saveAsImage() {
    let query = wx.createSelectorQuery().in(this);
    query.select("#pubCertificate").boundingClientRect();
    query.exec(function (res) {
      console.log("View 的信息：", res[0]);
    });
    console.log(value, 123)
    let drawImage = new Wxml2Canvas({
      element: 'pubCertificate', // canvas节点的id,
      obj: that, // 在组件中使用时，需要传入当前组件的this
      width: this.width * 2, // 宽高
      height: this.height * 2,
      background: '#fff', // 默认背景色
      progress(percent) { // 绘制进度
    const that = this
    const query = wx.createSelectorQuery().in(this)
    query
      .select('#pubCertificate')
      .fields({
          // 选择需要生成canvas的范围
          size: true,
          node: true,
          scrollOffset: true,
      },
      finish(url) {
        console.log("创建的图片", url);
        (data) => {
          let width = data.width
          let height = data.height
          console.log(width, height)
          that.setData({
            imageWidth: width,
            imageHeight: height,
          })
      },
      error(res) {
        console.log(res);
        // uni.hideLoading()
        // 画失败的原因
      }
    }, this);
    // const canvas = Wxml2Canvas.wxmlToCanvas(value);
    // // 转换为图片
    // const img = Wxml2Canvas.canvasToTempImage(canvas);
    // const path = Wxml2Canvas.canvasToTempFilePath(canvas);
    // console.log(canvas)
    // Wxml2Canvas(value).then((canvas) => {
    //   const img = canvas.toDataURL('image/png')
    //   this.setData({
    //     cbzsImg: img,
    //   })
    // })
      )
      .exec()
    this.drawImage1()

    // Wxml2Canvas(textCertificate.value).then((canvas1) => {
    //   const img1 = canvas1.toDataURL('image/png')
    //   rzzsImg.value = img1
    // })
    this.setData({
  },
  drawImage1() {
    let that = this;
    let drawMyImage = new Wxml2Canvas({
      // width: 230,
      // height: 325,
      width: that.data.imageWidth,
      height: that.data.imageHeight,
      element: 'myCanvas',
      background: '#f0f0f0',
      progress(percent) {},
      finish(url) {
        console.log("生成的图片地址", url)
        wx.getFileSystemManager().readFile({
          filePath: url,
          encoding: 'base64',
          success: (res) => {
            let MyImageBase64 = 'data:image/jpg;base64,' + res.data
            console.log('MyImageBase64', MyImageBase64)
            that.setData({
              cbzsImg: MyImageBase64,
      pubCertificateHide: false,
    })
          },
        })
      },
      error(res) {
        console.log("生成的图片失败", res)
      }
    }, this);
    let data = {
      list: [{
        type: 'wxml',
        class: '.my_canvas .my_draw_canvas', //.my_draw_canvas每个要绘制元素的类名
        limit: '.my_canvas', //my_canvas根元素类名
        x: 0,
        y: 0
      }]
    }
    drawMyImage.draw(data, that);
  },
  //获取字段
  getType() {
@@ -1135,7 +1158,7 @@
  //证书查看
  onClick1() {
    this.setData({
      images: ['https://jsek.bnuic.com/home/certificate/szkc.jpg'],
      images: [this.data.cbzsImg],
      showIndex: true,
      visible: true,
    })