uniapp小程序使用canvas绘制内容并保存到本地相册

这篇具有很好参考价值的文章主要介绍了uniapp小程序使用canvas绘制内容并保存到本地相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求:根据不同用户自动生成对应证书,并且可以下载该证书(下载后得到的是一张图片),故要想实现该功能,则需要借助canvas将动态生成的内容绘制到页面中,然后再实现下载功能。

1.html代码

<view class="certify-main">
  <canvas type="2d" id="myCanvas" style="width: 375px; height: 550px;background-color: #fff;" />
  <view class="download" @click="download">下载证书</view>
</view>

页面很简单,只包含一个canvas和下载按钮即可。

2.js代码

// 所需数据
data() {
  return {
    name: "",
    year: "",
    month: "",
    day: "",
    beforeName: "",
    textCanvas: null,
    certificateNo:'',
    certQrCode:'', // 后台返回的二维码地址
  };
},

// 所需方法
methods(){
  // 从后台获取信息(以下代码我做了封装,你们直接正常请求接口获取数据就行,可以忽略)
  getCurrentOrg() {
    let opts = {
      url: url,  // url是接口地址
      method: "get",
    };
    let param = {}; // 参数
    request
      .httpTokenRequest(opts, param)
      .then((data) => {
        if (data && data.data && data.data.data) { 
          // 将获取到的数据赋值给对应字段
          const msg = data.data.data;
          if (msg.updateTime) {
            this.year = msg.updateTime.substring(0, 4)
            this.month = msg.updateTime.substring(5, 7)
            this.day = msg.updateTime.substring(8, 10)
          }
          this.beforeName = msg.snmsPrefix || "";
          this.name = msg.orgName;
          this.certificateNo = msg.certCode
          this.certQrCode = msg.certQrCode
          // 调用canvas绘制内容的方法
          this.drawCanvas()
        }
      })
      .catch((err) => {
        console.log(err);
        this.$refs.uToast.show({
          title: "数据异常或不存在",
          type: "warning",
          duration: "2300",
        });
      });
  },
  // 下载证书的方法
  download() {
    // 指定 this 指向
    let that = this;
    // 在微信中保存canvas为图片到本地,要通过canvas 实例的参数进行设置
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.textCanvas.width, // 设置画布宽度
      height: that.textCanvas.height, // 设置画布高度
      destWidth: that.textCanvas.width, // 屏幕width像素密度设置
      destHeight: that.textCanvas.height, // 屏幕height像素密度设置
      canvas: that.textCanvas, // 这里是重点,获取实例的时候保存为全局变量就行了
      complete(res) {
        console.log(res);
        // res.tempFilePath 返回的是临时地址 png 或者 jpg
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            uni.showToast({
              title: "保存成功",
              icon: "success",
            });
          },
          fail() {
            uni.showToast({
              title: "保存失败",
              icon: "error",
            });
          },
        });
      },
    });
  },
  drawCanvas() {
    // 指定this的指向
    let that = this;
    // uni-app 中,不管是小程序,app,h5 在获取元素实例时,都是统一的方法,只要获取元素的宽高
    uni
      .createSelectorQuery()
      .select("#myCanvas")
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(res);
        // 获取设备设备像素比
        const dpr = uni.getSystemInfoSync().pixelRatio;
        // 微信小程序绘制
        let textCanvas = (that.textCanvas = res[0].node); // 获取元素实例
        textCanvas.width = res[0].width * dpr; // 设置canvas像素宽
        textCanvas.height = res[0].height * dpr; // 设置canvas像素高
        let textCtx = textCanvas.getContext("2d"); // 创建二维绘图
        textCtx.clearRect(0, 0, res[0].width, res[0].height); // 设置画布大小
        textCtx.beginPath(); // 创建一条新的路劲
        textCtx.scale(dpr, dpr); // 设置x,y缩放(这里作用不大,,没效果)
        // 这里开始绘制canvas内容,绘制的过程当中,不知道是小程序的问题,还是什么问题在绘制有背景图片的内容时,
        // 文字内容必须要延迟绘制,也就是要定时器延迟一定时间才能绘制,要不然就会将文字覆盖在图片下方。
        // 图片的绘制(这里将此图片作为背景图的,图片不能带底色,即透明的,方便在上面写字绘图)
        const tx = textCanvas.createImage();
        tx.src = "https://test.xxxx.com/pic/new_certify.png"; // 线上地址或者本地地址都可以
        tx.onload = () => {
          textCtx.drawImage(
            tx,
            5,
            20,
            res[0].width-10,
            res[0].height-20
          ); // 参数从左到右说明, 图片文件,x轴开始位置,y轴开始位置,x轴结束位置,y轴结束位置
        };
        // 文字设置
        textCtx.fillStyle = "#333"; // 文字颜色
        textCtx.font = "bold 12px MicrosoftYaHei"; // 字体样式 设置加粗("normal bold 16px sans-serif");
        textCtx.fillText(this.name, 102, 203); // 设置文字内容, x轴位置,y轴位置
        textCtx.fillText(this.year, 111, 230); // 设置文字内容, x轴位置,y轴位置
        textCtx.fillText(this.month, 180, 230); // 设置文字内容, x轴位置,y轴位置
        textCtx.fillText(this.day, 230, 230); // 设置文字内容, x轴位置,y轴位置
        textCtx.fillText(this.beforeName, 168, 296); // 设置文字内容, x轴位置,y轴位置
        textCtx.fillStyle = "#003E8A";
        textCtx.font = "10px MicrosoftYaHei";
        textCtx.fillText(this.certificateNo, 186, 466); // 设置文字内容, x轴位置,y轴位置
        // 二维码设置
        const tx1 = textCanvas.createImage();
        tx1.src = this.certQrCode
        tx1.onload = () => {
          textCtx.drawImage(
            tx1,
            154,
            380,
            65,
            65
          ); // 参数从左到右说明, 图片文件,x轴开始位置,y轴开始位置,x轴结束位置,y轴结束位置
        };
      });
  },
}

3.效果图展示

注:下图证书编号这个地方的样式忘了修改,部分信息由于涉及项目隐私,故马赛克,但不影响整体效果(其中黑色文字+二维码+证书编号是动态的,其余文字都是背景图自带的)

 文章来源地址https://www.toymoban.com/news/detail-706642.html

到了这里,关于uniapp小程序使用canvas绘制内容并保存到本地相册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包