微信小程序-CANVAS写入图片素材、文字等数据生成图片

  • 开发
  • 10

微信小程序中，CANVAS写入图片素材、文字等数据生成图片，最终可将生成的 base64 格式图片保存至相册操作

Tips：

1、canvas 标签默认宽度 300px、高度 150px
canvas 生成图片时，写入图片素材、文字等数据前，需要根据实际需求，设置 canvas 宽、高，
如以下示例中 设置 posterCanvas.width 及 posterCanvas.height

2、同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
canvas 不可设置隐藏，否则不能正常工作，若不希望其显示的话，可以 如以下示例中 设置 CSS样式，
makeResCanvasW 、 makeResCanvasH 都设置为 0 ，
- 原生开发：
style="width: {{makeResCanvasW}}rpx;height: {{makeResCanvasH}}rpx;"
或
- uniapp开发：
:style="'width: ' + makeResCanvasW + 'rpx;height: ' + makeResCanvasH + 'rpx;'"

3、多次生成操作时，清除之前写入数据即可，不需要设置多个 canvas
如以下示例中 setCanvasCtx 方法设置
判断是否已有 Canvas 对象，无则设置 Canvas 对象 及 Canvas 绘制上下文 ctx，有则清除之前写入的数据

4、写入图片素材、文字等数据，与普通H5操作一致
写入图片设置：
注：使用网络图片时，使用 downloadFile 方法，下载文件资源到本地进行处理（返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 200MB）
如以下示例中 步骤：
- posterCanvas.createImage() 创建一个图片对象
- .src 设置图片的 URL
- .onload 图片加载完成后触发的回调函数，这里可以获取到此图片对象的宽高等数据
- .drawImage 画入图片数据
- 其他写入数据：与H5中处理基本一致

5、生成图片（base64 格式图片）
如以下示例中 posterCanvas.toDataURL('image/png') ，生成图片后，可使用 小程序预览图片方法 previewImage 方法查看生成的图片

6、base64 格式图片保存至相册
如以下示例中 base64ImageHandle 方法设置，
步骤：
- .env.USER_DATA_PATH ： 指定图片的临时路径【.env 环境变量 .USER_DATA_PATH 文件系统中的用户目录路径 (本地路径)】
- getFileSystemManager ： 获取小程序的文件系统（小程序获取全局唯一的文件管理器方法）
- .writeFile ： 把arraybuffer数据写入到临时目录中（写文件）
- 使用小程序保存图片到系统相册方法 saveImageToPhotosAlbum，把临时路径下的图片，保存图片到相册

微信小程序-原生开发，处理代码如下：

wxml：

<canvas type="2d" id="makeResCanvas" style="width: {{makeResCanvasW}}rpx;height: {{makeResCanvasH}}rpx;"></canvas>

data中参数：

data: {
  makeResCanvasW : 0,
  makeResCanvasH : 0,
},

调用方法生成图片

this.makeResImg();

处理方法：

/**
 * CANVAS画布生成图片
 */
makeResImg() {
  wx.showLoading({
    title: "生成中",
    mask: true
  });
  this.setCanvasCtx(()=>{
    this.makeResImgAfter();
  })
},
// 
setCanvasCtx(callback){
  if(this.data.posterCanvas){
    console.log(222)
    this.data.posterCtx.clearRect(0, 0, this.data.posterCanvas.width, this.data.posterCanvas.height);
    callback && callback();
  }else{
    console.log(111)
    const query = wx.createSelectorQuery();
    query.select('#makeResCanvas')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      // console.log(res);
      this.setData({
        posterCanvas : res[0].node
      })
      this.setData({
        posterCtx : this.data.posterCanvas.getContext('2d')
      })
      this.data.posterCtx.clearRect(0, 0, this.data.posterCanvas.width, this.data.posterCanvas.height);
      callback && callback();
    })
  }
},
// 
makeResImgAfter(){
  // 写入 生成图片 背景图片
  const posterBgImg = this.data.posterCanvas.createImage();
  posterBgImg.src = '../../images/poster_bg.png';
  // this.getDownloadFile('https://xxxxxxxxx/poster_bg.png',(formimgTempFilePath)=>{
    // posterBgImg.src = formimgTempFilePath;
    posterBgImg.onload = () => {
      console.log('背景图实际宽高', posterBgImg.width, posterBgImg.height);
      this.data.posterCanvas.width = posterBgImg.width;
      this.data.posterCanvas.height = posterBgImg.height;
      this.setData({
        makeResCanvasW:0,
        makeResCanvasH:0,
      })
      // 画入背景图片
      this.data.posterCtx.drawImage(posterBgImg, 0, 0, posterBgImg.width, posterBgImg.height);
      
      // 写入 生成图片 勾选标识图片
      const checkImg = this.data.posterCanvas.createImage();
      checkImg.src = '../../images/check.png';
      // this.getDownloadFile('https://xxxxxxxxx/check.png',(checkTempFilePath)=>{
        // checkImg.src = checkTempFilePath;
        checkImg.onload = () => {
          // 画入勾选标识图片
          this.data.posterCtx.drawImage(checkImg, 20, 188, 32, 24);
          this.data.posterCtx.drawImage(checkImg, 20 + 42, 188, 32, 24);
          this.data.posterCtx.drawImage(checkImg, 20 + 42 + 42, 188, 32, 24);
          this.data.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42, 188, 32, 24);
          this.data.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42 + 42, 188, 32, 24);
          this.data.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42 + 42 + 42, 188, 32, 24);
          // 写入文本
          this.data.posterCtx.fillStyle = '#000000';
          this.data.posterCtx.textAlign = 'left';
          this.data.posterCtx.textBaseline = 'top';
          this.data.posterCtx.font = '26px "PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"';
          // 写入单行文本
          this.data.posterCtx.fillText('写入单行文本',10,60);
          // 写入多行文本
          this.writeTextOnCanvas(this.data.posterCtx, 36, 40, '写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本' ,10, 100);
          // 生成图片
          this.setData({
            posterUrl: this.data.posterCanvas.toDataURL('image/png'),
          })
          
          // 查看生成的图片
          setTimeout(()=>{
            wx.previewImage({
              current: this.data.posterUrl,
              urls: [this.data.posterUrl]
            });
          },10)
          wx.hideLoading();
          
          // base64图片保存至相册
          setTimeout(()=>{
            this.base64ImageHandle(this.data.posterUrl);
          },10)
        }
      // })
    }
  // })
},
// 写入多行文本
writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
  function getTrueLength(str){
    var len = str.length, truelen = 0;
    for(var x = 0; x < len; x++){
      if(str.charCodeAt(x) > 128){
        truelen += 2;
      }else{
        truelen += 1;
      }
    }
    return truelen;
  }
  function cutString(str, leng){
    var len = str.length, tlen = len, nlen = 0;
    for(var x = 0; x < len; x++){
      if(str.charCodeAt(x) > 128){
        if(nlen + 2 < leng){
          nlen += 2;
        }else{
          tlen = x;
          break;
        }
      }else{
        if(nlen + 1 < leng){
          nlen += 1;
        }else{
          tlen = x;
          break;
        }
      }
    }
    return tlen;
  }
  for(var i = 1; getTrueLength(text) > 0; i++){
    var tl = cutString(text, bytelength);
    ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
    text = text.substr(tl);
  }
},
// 下载网络图片
getDownloadFile(img,callback){
  wx.downloadFile({
    url: img,
    success (res) {
      if (res.statusCode === 200) {
        callback && callback(res.tempFilePath)
      }
    }
  })
},
// base64图片保存至相册
base64ImageHandle(base64) {
  // 指定图片的临时路径
  const path = `${wx.env.USER_DATA_PATH}/reportformImg.png`
  // 获取小程序的文件系统
  const fsm = wx.getFileSystemManager()
  // 把arraybuffer数据写入到临时目录中
  fsm.writeFile({
    filePath: path,
    data: base64.replace(/^data:image\/\w+;base64,/, ''),
    encoding: 'base64',
    success: () => {
      wx.hideLoading();
      wx.showModal({
        title: '保存图片',
        content: '保存数据报表图片至手机相册？',
        success: (result) => {
          if (result.confirm) {
            // 把临时路径下的图片，保存至相册
            wx.saveImageToPhotosAlbum({
              filePath: path,
              success: () => {
                wx.showToast({
                title: '保存海报成功',
                icon: 'success',
                duration: 2000
                })
              }
            })
          }
        }
      })
    }
  })
},

微信小程序-uniapp开发，处理代码如下：

.vue：

<canvas type="2d" id="makeResCanvas" :style="'width: ' + makeResCanvasW + 'rpx;height: ' + makeResCanvasH + 'rpx;'"></canvas>

data中参数：

data() {
  return {
    makeResCanvasW:0,
    makeResCanvasH:0,
  };
},

调用方法生成图片

this.makeResImg();

处理方法：

/**
 * CANVAS画布生成图片
 */
makeResImg() {
  uni.showLoading({
    title: "生成中",
    mask: true
  });
  this.setCanvasCtx(()=>{
    this.makeResImgAfter();
  })
},
// 
setCanvasCtx(callback){
  if(this.posterCanvas){
    console.log(222)
    this.posterCtx.clearRect(0, 0, this.posterCanvas.width, this.posterCanvas.height);
    callback && callback();
  }else{
    console.log(111)
    const query = uni.createSelectorQuery();
    query.select('#makeResCanvas')
    .fields({
      node: true,
      size: true
    })
    .exec((res) => {
      // console.log(res);
      this.posterCanvas = res[0].node;
      this.posterCtx = this.posterCanvas.getContext('2d');
      this.posterCtx.clearRect(0, 0, this.posterCanvas.width, this.posterCanvas.height);
      callback && callback();
    })
  }
},
// 
makeResImgAfter(){
  // 写入 生成图片 背景图片
  const posterBgImg = this.posterCanvas.createImage();
  posterBgImg.src = '/static/images/xjshop/poster_bg.png';
  // this.getDownloadFile('https://xxxxxxxxx/poster_bg.png',(formimgTempFilePath)=>{
    // posterBgImg.src = formimgTempFilePath;
    posterBgImg.onload = () => {
      // console.log('背景图实际宽高', posterBgImg.width, posterBgImg.height);
      this.posterCanvas.width = posterBgImg.width;
      this.posterCanvas.height = posterBgImg.height;
      this.makeResCanvasW = 0;
      this.makeResCanvasH = 0;
      // 画入背景图片
      this.posterCtx.drawImage(posterBgImg, 0, 0, posterBgImg.width, posterBgImg.height);
      
      // 写入 生成图片 勾选标识图片
      const checkImg = this.posterCanvas.createImage();
      // checkImg.src = '/static/images/xjshop/check.png';
      this.getDownloadFile('https://xxxxxxxxx/check.png',(checkTempFilePath)=>{
        checkImg.src = checkTempFilePath;
        checkImg.onload = () => {
          // 画入勾选标识图片
          this.posterCtx.drawImage(checkImg, 20, 188, 32, 24);
          this.posterCtx.drawImage(checkImg, 20 + 42, 188, 32, 24);
          this.posterCtx.drawImage(checkImg, 20 + 42 + 42, 188, 32, 24);
          this.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42, 188, 32, 24);
          this.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42 + 42, 188, 32, 24);
          this.posterCtx.drawImage(checkImg, 20 + 42 + 42 + 42 + 42 + 42, 188, 32, 24);
          // 写入文本
          this.posterCtx.fillStyle = '#000000';
          this.posterCtx.textAlign = 'left';
          this.posterCtx.textBaseline = 'top';
          this.posterCtx.font = '26px "PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"';
          // 写入单行文本
          this.posterCtx.fillText('写入单行文本',10,60);
          // 写入多行文本
          this.writeTextOnCanvas(this.posterCtx, 36, 40, '写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本' ,10, 100);
          // 生成图片
          this.posterUrl = this.posterCanvas.toDataURL('image/png')
          
          // 查看生成的图片
          setTimeout(()=>{
            uni.previewImage({
              current: this.posterUrl,
              urls: [this.posterUrl]
            });
          },10)
          uni.hideLoading();
          
          // base64图片保存至相册
          setTimeout(()=>{
            this.base64ImageHandle(this.posterUrl);
          },10)
        }
      })
    }
  // })
},
// 写入多行文本
writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
  function getTrueLength(str){
    var len = str.length, truelen = 0;
    for(var x = 0; x < len; x++){
      if(str.charCodeAt(x) > 128){
        truelen += 2;
      }else{
        truelen += 1;
      }
    }
    return truelen;
  }
  function cutString(str, leng){
    var len = str.length, tlen = len, nlen = 0;
    for(var x = 0; x < len; x++){
      if(str.charCodeAt(x) > 128){
        if(nlen + 2 < leng){
          nlen += 2;
        }else{
          tlen = x;
          break;
        }
      }else{
        if(nlen + 1 < leng){
          nlen += 1;
        }else{
          tlen = x;
          break;
        }
      }
    }
    return tlen;
  }
  for(var i = 1; getTrueLength(text) > 0; i++){
    var tl = cutString(text, bytelength);
    ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
    text = text.substr(tl);
  }
},
// 下载网络图片
getDownloadFile(img,callback){
  uni.downloadFile({
    url: img,
    success (res) {
      if (res.statusCode === 200) {
        callback && callback(res.tempFilePath)
      }
    }
  })
},
// base64图片保存至相册
base64ImageHandle(base64) {
  // 指定图片的临时路径
  const path = `${uni.env.USER_DATA_PATH}/reportformImg.png`
  // 获取小程序的文件系统
  const fsm = uni.getFileSystemManager()
  // 把arraybuffer数据写入到临时目录中
  fsm.writeFile({
    filePath: path,
    data: base64.replace(/^data:image\/\w+;base64,/, ''),
    encoding: 'base64',
    success: () => {
      uni.hideLoading();
      uni.showModal({
        title: '保存图片',
        content: '保存数据报表图片至手机相册？',
        success: (result) => {
          if (result.confirm) {
            // 把临时路径下的图片，保存至相册
            uni.saveImageToPhotosAlbum({
              filePath: path,
              success: () => {
                uni.showToast({
                title: '保存海报成功',
                icon: 'success',
                duration: 2000
                })
              }
            })
          }
        }
      })
    }
  })
},

素材图片

原生开发 生成图片

uniapp开发 生成图片

 下载图片提示

阅读全部

相关推荐

  2. 微信小程序Canvas画布绘制图片、文字、矩形、（椭）圆、直线

    2024-07-23 08:02:01       49 阅读

  3. 微信小程序canvas画布转图片转pdf文件

    2024-07-23 08:02:01       49 阅读

  7. 微信小程序加载动态svg数据图片

    2024-07-23 08:02:01       50 阅读

  9. 微信小程序 图片上传到文件服务器

    2024-07-23 08:02:01       24 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-23 08:02:01       50 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-23 08:02:01       54 阅读

  9. 在Django里面运行非项目文件

    2024-07-23 08:02:01       43 阅读

  19. Python语言-面向对象

    2024-07-23 08:02:01       54 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-23 08:02:01       50 阅读

热门阅读

  2. GCD异步与同步任务执行顺序分析

    2024-07-23 08:02:01       14 阅读

  3. 设计模式-策略模式

    2024-07-23 08:02:01       16 阅读

  10. 深入解析Memcached：C#中的应用与实战案例

    2024-07-23 08:02:01       13 阅读

  14. Python subprocess.call - 将变量添加到 subprocess.call

    2024-07-23 08:02:01       11 阅读

  18. HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号3

    2024-07-23 08:02:01       18 阅读

  24. 自定义特征的智能演进：Mojo模型中的动态特征选择控制

    2024-07-23 08:02:01       19 阅读

  25. 释放分布式系统潜能：Mojo模型的集成与应用

    2024-07-23 08:02:01       15 阅读

  28. 精准控制构建流程：Gradle中onlyIf条件的高级应用

    2024-07-23 08:02:01       16 阅读

  29. github搜索指令

    2024-07-23 08:02:01       17 阅读