小程序绘制海报保存到相册

本文记录了作者在字节小程序中制作海报并保存到相册的过程。首先,通过canvas绘制海报,包括背景、头像、昵称、标题、正文和二维码等元素。接着,将canvas转换为图片,最后实现长按保存到相册的功能。文章提供了canvas操作和思路提示,适合初学者参考。
摘要由CSDN通过智能技术生成

说在前面的话

自己第一次制作了海报并且保存相册,故来记录一下。。。分享给需要的朋友,这里以字节小程序为例,明白思路,学以致用!!!

正文开始了(一本正经)

思路:
	1.用canvas绘图,将自己的海报绘制出来
	2.将绘制好的canvas转化成图片
	3.调用api将生成的图片保存到相册
	tip:为什么要用canvas呢?因为只有图片才可以保存到相册,把你海报的所有东西变成一张图片,仿佛只能canvas了吧。思路了解,码上就来!

第一步:绘制海报

我们可以想一下海报的构成:背景,头像,昵称,标题,正文,二维码。。。主要可能也就是这些了吧。然后再来分析一下,背景、二维码、头像是图片;昵称标题,正文是文字。所以就是这么简单,图片加文字,自己测量好长宽、位置放置就好啦。第一次绘制canvas的同学不要慌,就是如此简单的吖!!!

我呢还是很贴心的啦,虽然没有成品的海报(毕竟每个人的海报中内容不一样),but 我把文字图片的绘制方法都写出来了,还绘制了一些常用图形,以及海报中可能遇到的一些需求,所以大家根据自己的需要修改他们的大小和位置就好啦

index.js 首先创建一个canvas(我是在onshow中)
data: {
    canvasWidth: 375,
    canvasHeight: 500,
    bgwidth: "",
    bgHeight: "",
    text: "骑着我心爱的小摩托温婉居家小仙女啦啦啦",
    img: ''
  },
onShow() {
    this.ctx = tt.createCanvasContext("myCanvas");//myCanvas是canvas的id,这个之后我们在html中给大家展示写法
    this.createCanves();//调用绘制海报的方法
  },
  createCanves() {
    let ctx = this.ctx;
    let imgArr = {
      url1:
        "../../image/bg.jpg",
      url2: "../../image/user.jpg",
  
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值