为了账号安全,请及时绑定邮箱和手机立即绑定

小程序 — canvas图片合成

标签:
Html/CSS WebApp

前言:这章我们为图片添加一些小物件,然后用canvas合成并导出到本地。
GitHub:https://github.com/Ewall1106/miniProgramDemo
我们先看看图片合成的效果:

webp

图片合成过程.gif

webp

图片合成后海报

1、小程序canvas

关于小程序的canvas一些基本概念和方法大家可以去官网看看,我不过多阐述。

2、页面布局

根据我们开头图片所示我们继续一个基本的页面布局

  • html基本结构

<view class="container">  <view class="show_block">
    <image class="bg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{bgSrc}}" />
    <image class="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{imgSrc}}" />
    <canvas class="myCanvas" canvas-id="myCanvas" style="width: 375px; height: 417px;"></canvas>
  </view>
  <button @tap="choose">选择图片</button>
  <button @tap="save">保存海报</button></view>
  • css样式布局
    这里我们把canvas隐藏在展示的img图片后面。

.container {
  .show_block {
    position: relative;
    width: 750rpx;
    height: 834rpx;
  .bg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .img {
    position: absolute;
    top: 86rpx;
    left: 114rpx;
    display: block;
    width: 520rpx;
    height: 527rpx;
  }
  .myCanvas {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    }
  }
}

3、事件处理

(1)choose选择图片事件

  • 我们在data中定义两个图片src属性,一个是背景,一个是用户上传的图片。

data = {
  bgSrc: '/assets/images/bg.png',
  imgSrc: ''};
  • 当点击选择时,我们调用小程序的chooseImage事件从用户相册中获取图片,然后把获取的临时图片路径赋给data中imgSrc

choose() {
  let self = this;
    wx.chooseImage({
      success: function(res) {        self.imgSrc = res.tempFilePaths[0];        self.$apply();
      }
    });
    this.$apply();
}

(2)save保存图片事件

save() {  let self = this;  if (!this.imgSrc) {
    wepy.showToast({      title: '请先选择图片',      icon: 'none',      duration: 2000
    });    return false;
  }
  wx.getSetting({
    success(res) {      if (!res.authSetting['scope.writePhotosAlbum']) {
        wx.authorize({          scope: 'scope.writePhotosAlbum',
          success() {
            self.saveImage();
          }
      });
      } else {
        self.saveImage();
      }
    }
  });
}
  • 然后我们先使用canvas绘制图片并保存

saveImage() {
  wepy.showLoading({    title: '保存中...'
  });  let self = this;  const ctx = wx.createCanvasContext('myCanvas');
  ctx.drawImage(self.bgSrc, 0, 0, 375, 417);
  ctx.drawImage(self.imgSrc, 57, 44, 260, 264);
  ctx.draw(false, function(e) {    // 保存到本地
    wx.canvasToTempFilePath({      x: 0,      y: 0,      width: 375,      height: 417,      canvasId: 'myCanvas',      success: function(res) {        let pic = res.tempFilePath;
        wx.saveImageToPhotosAlbum({          filePath: pic,
          success(res) {
            wx.hideLoading();
            wx.showToast({              title: '保存成功',              icon: 'success',              duration: 2000
            });
          }
        });
      }
    });
  });
}

这样我们就实现合成一张海报并保存到本地。

 


作者:Ewall_
链接:https://www.jianshu.com/p/8d0388c765fa


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消