小程序生成海报

最新推荐文章于 2024-05-24 10:22:57 发布
最新推荐文章于 2024-05-24 10:22:57 发布
阅读量265 收藏 2
点赞数
文章标签： 小程序生成海报
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HXH_csdn/article/details/103387806
版权

1 . 效果图大概就是下面的样子,里面的内容可以按照需要添加
在这里插入图片描述
下面直接代码

  1. html
<button bindtap='gotoSubmit'>保存到相册</button>
<!-- 弹框 -->
  <view class='container1' bindtap="previewImg">
        <image style="width:100%;"  src="{{imagePath}}" ></image>
  </view>
<canvas style="width:{{420}}px;height:{{720}}px;}}" canvas-id="mycanvas" />

3 .wxss

page{
  height: calc(100% - 30rpx);
  width: calc(100% - 80rpx);
  padding: 30rpx 40rpx 0;
  background: #f1f1f1
}
button{
    width: calc(100% - 80rpx);
    position: fixed;
    z-index: 1;
    bottom:60rpx;
    background: #e4393c;
    color: #fff;
    height: 88rpx;
}

.container1{
    height: 900rpx;
    width: 600rpx;
    background-color:#FFF;
    border-radius: 30rpx;
    margin: 0rpx auto;
}
.container1 image{
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
  background: #fff
}
canvas{
  position: fixed;
  top: 9999rpx;
  
}

4 js

Page({

  data: {
    showhaibao:false,//隐藏显示
    maskHidden: true,//隐藏显示
    bendiImg:'/images/logo.png',//本地图片
    ercodeImg:'/images/erweima.png',//二维码图片
    userBg:'/images/userbg.png',
     // 屏幕可用宽高
    windowWidth: wx.getSystemInfoSync().windowWidth,
    windowHeight: wx.getSystemInfoSync().screenHeight,
    // 图片预览本地文件路径
    previewImageUrl: null
  },

  onLoad: function (options) {
    // 此处获取设备的宽高。canvas绘制的图片以次宽高为准
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res)
        _this.setData({
          windowW: res.windowWidth,
          windowH: res.screenHeight,
          screenWidth: res.screenWidth ,
          pixelRatio: res.pixelRatio
        })
      },
    })
    wx.getUserInfo({    //获取微信用户信息
      success: function (res) {
        _this.getImageInfo(res.userInfo.avatarUrl);  //  调取图片处理方法
        _this.setData({
          userName: res.userInfo.nickName
        });
      }
    });
    

  //  网络图片必须是要下载的
    wx.downloadFile({
        url: 网络图片地址必须要在小程序中配备合法域名,
        success: function (res1) {
            console.log(res1.tempFilePath)
            //缓存商品图片
            _this.setData({
                img1: res1.tempFilePath
            })
        }
    })
  },
  onReady: function () {
    // 页面渲染完成
    this.createNewImg();
    //创建初始化图片

  },

  onShow:function(){
    var _this = this;
     this.setData({
        maskHidden: false,
        showhaibao: true
      })
      wx.showToast({
        title: '图片生成中...',
        icon: 'loading',
        duration: 2000
      });
      setTimeout(function () {
        wx.hideToast()
        _this.createNewImg();
      }, 2000)
  },

  getImageInfo:function(url) { 
    var that = this;   //  图片缓存本地的方法
    if (typeof url === 'string') {
      wx.getImageInfo({   //  小程序获取图片信息API
        src: url,
        success: function (res) {
          that.setData({
            head_img: res.path
          })
        },
        fail(err) {
          console.log(err)
        }
      })
    }
  },
  //将金额绘制到canvas的固定
  setMoney: function (context) {
    var name = 'ONLY2018夏季新款蕾丝短袖连衣裙ONLY2018夏季新款蕾丝短袖连衣裙';//商品标题
    if (name.length>40){
      var icon = '￥';
      context.setFontSize(14);
      context.setFillStyle("#e4393c");
      context.fillText(icon, 20, 150);
      context.stroke();
      var money = '29.9';//价格放在这
      context.setFontSize(20);
      context.setFillStyle("#e4393c");
      context.fillText(money, 35, 150);
      context.stroke();
    }else{
      var icon = '￥';
      context.setFontSize(14);
      context.setFillStyle("#e4393c");
      context.fillText(icon, 20, 110);
      context.stroke();
      var money = '29.9';//价格放在这
      context.setFontSize(20);
      context.setFillStyle("#e4393c");
      context.fillText(money, 35, 110);
      context.stroke();
    }
    
  },
  //将说明绘制到canvas固定
  setSuoming: function (context) {
    var Suoming = "电商版云服务"
    context.setFontSize(16);
    context.setFillStyle("#e4393c");
    context.fillText(Suoming, 20, 650);
    context.stroke();
  },
  //将说明2绘制到canvas固定
  setSuoming1: function (context) {
    var Suoming = "扫一扫进入小程序查看更多信息";
    context.setFontSize(16);
    context.setFillStyle("#666");
    context.fillText(Suoming, 20, 680);
    context.stroke();
  },

  // 绘制用户名
  username: function (context) {
    var username = '用户名';
    context.setFontSize(16);
    context.setFillStyle("#333");
    context.fillText(username, 90, 550);
    context.stroke();
  },


  //将标题绘制到canvas的固定
  setName: function (context) {
    var name = "ONLY2018夏季新款蕾丝短袖连衣裙ONLY2018夏季新款蕾丝短袖连衣裙";
    if (name.length>40){
      var name1 = name.substr(0, 23);
      var name2 = name.substr(22,44);
      var name3 = name.substr(44);
      console.log(name1, name2)
      context.setFontSize(18);
      context.setFillStyle("#333333");
      context.fillText(name1, 20, 40);
      context.stroke();
      context.setFontSize(18);
      context.setFillStyle("#333333");
      context.fillText(name2, 20, 70);
      context.stroke();
      context.setFontSize(18);
      context.setFillStyle("#333333");
      context.fillText(name3, 20, 70);
      context.stroke();
    }else{
      var name1 = name.substr(0, 23);
      var name2 = name.substr(23);
      context.setFontSize(19);
      context.setFillStyle("#333333");
      context.fillText(name1, 20, 40);
      context.stroke();
      context.setFontSize(19);
      context.setFillStyle("#333333");
      context.fillText(name2, 20, 70);
      context.stroke();
    }
  },
  // 绘制头像
  drawHead: function (context){
    let that = this;
    let path1 = that.data.poster_head; //用户头像
    ctx.arc(70, 60, 32, 0, 2 * Math.PI)  //画圆
    ctx.setFillStyle('#fff')
    ctx.fill();
    ctx.clip();
    ctx.drawImage(path1, 38, 28, 64, 64)
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var _this = this;
    var name = "ONLY2018夏季新款蕾丝短袖连衣裙ONLY2018夏季新款蕾丝短袖连衣裙";
    if(name.length>40){
      var axesY = 180
    }else{
      var axesY = 130
    }
    var context = wx.createCanvasContext("mycanvas");
    context.setFillStyle('#FFF')
    context.fillRect(0, 0, this.data.windowWidth, this.data.windowHeight)
    var path = _this.data.bendiImg;  //详细看onLoad函数注释部分这里放你的本地图片路径，或者网络图片缓存在本地的路径
    var path1 = _this.data.ercodeImg;//二维码图片
    var path2 = _this.data.userBg;//用户背景图
    context.drawImage(path, 20, axesY, 370, 370);  //这里是商品图片
    this.setSuoming(context);
    this.setName(context);
    this.setMoney(context);
    this.setSuoming1(context);
    context.drawImage(path1, 285, 610, 100, 100);//这里是二维码图片
    context.drawImage(path2, 20, 520, 370, 50);//用户背景图
    this.drawHead(context);  //用户头像
    this.username(context);
    context.save();  //保存绘图上下文。
    context.beginPath();  //开始创建一个路径
    context.arc(45, 545, 25, 0, 2 * Math.PI);
    context.clip(); //从原始画布中剪切任意形状和尺寸
    context.drawImage(path, 20, 520, 50, 50);  //t头像放在这
    context.restore();  //恢复之前保存的绘图上下文
    context.draw(false, () => { that.getImg()}, 500) //将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。

  },
  //将生成好的图片保存到本地  下面这句注释是文档中的原话。
  // tip: 在 draw 回调里调用canvasToTempFilePath方法才能保证图片导出成功。
  getImg() {
    var _this = this;

    // 获取宽高
    let wW = _this.data.windowWidth;
    let wH = _this.data.windowHeight;

    wx.canvasToTempFilePath({
     
      width: 420, //canvas原本的大小
      heght: 720,
      destWidth: 420*2 ,
      destHeight:720*2,
      canvasId: 'mycanvas',
      // fileType: 'png',
      quality: 1,
      success: function success(res) {
        _this.setData({
          imagePath: res.tempFilePath,
        });
       
      }
    });
  },
  //点击图片进行预览，长按保存分享图片
  previewImg: function (e) {
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  gotoSubmit: function (e) {
    var _this = this;
    wx.saveImageToPhotosAlbum({
      filePath: _this.data.imagePath,
      success(res) {
        //保存成功
        console.log(res);
      },
      fail: function (res) {
        wx.showToast({
          icon: 'fail',
          title: 'sorry 保存失败,请稍后再试',
        })
        return;
      }

    })
    // this.setData({
    //   maskHidden: false,
    //   showhaibao: true
    // })
    // wx.showToast({
    //   title: '图片生成中...',
    //   icon: 'loading',
    //   duration: 2000
    // });
    // setTimeout(function () {
    //   wx.hideToast()
    //   _this.createNewImg();
    // }, 2000)

  }

})
HXH_csdn
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序生成海报Demo
11-03
功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 支持文字背景、获取宽度、主动换行 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
海报制作，海报小程序，海报
11-09
一款海波制作小程序源码，所有功能源码都有，除了里面用的海报模版是服务器上的，这个需要你自己去写。
【全开源】海报在线制作系统源码（ThinkPHP+FastAdmin+UniApp）
最新发布
2401_84413757的博客
05-24 590
海报在线制作系统源码为用户提供了便捷、高效的海报制作工具，让用户能够轻松打造个性化的创意海报。无论是企业宣传、活动推广还是个人创作，该系统源码都能为您带来出色的设计体验。希望本文的介绍能够帮助您更好地了解和使用海报在线制作系统源码。
微信小程序实现生成分享海报案例
韩旭不会敲代码吧的博客
06-06 4390
微信小程序实现生成分享海报案例
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
朝阳39的博客
04-13 3134
可在系列教程的基础上继续开发，也可以单独使用。
小程序生成海报需求
Qianmoer的博客
01-26 839
需求描述：在小程序根据已有的dom样式，生成一张图片作为海报图分享出去。方法1、使用官方的canvas api 把想要的dom样式通过画矩形画text一步步画出来。方法2、 简单so easy。使用插件。
微信小程序生成海报
03-15
微信小程序生成海报，以及自定义生成海报的内容，然后生成图片保存
小程序之生成海报
Wyf的博客
08-30 825
小程序之生成海报 废话不说，直接上干货~ //生成海报 createposter: function () { let that = this; that.createNewImg(); // 执行绘图 that.setData({actionSheetHidden:true}); if (that.data.swiperImgs.length ==...
关于小程序生成海报
weixin_43831261的博客
05-21 268
关于小程序生成海报并保存到本地相册 生成图片的过程 toSetImage(obj,width,height,imgUrl,codeImg,text) { //obj是页面的this //with,height指的是canvas的宽高 //imageUrl 指的的海报的图片 //codeImg 指的的生成的邀请二维码的图片 //text 文字说明 var that = obj; //控制canvas的显示隐藏 obj.canvasShow
微信小程序生成海报demo
10-11
该demo主要用于微信小程序生成海报功能，简单快捷，容易维护等
小程序海报组件生成朋友圈分享海报并生成图片
08-10
小程序海报组件-生成朋友圈分享海报并生成图片
微信小程序生成海报分享朋友圈的实现方法
10-17
利用微信强大的社交能力通过小程序达到裂变的目的，拉取新用户。下面小编给大家带来了微信小程序生成海报分享朋友圈的实现方法，感兴趣的朋友跟随小编一起看看吧
小程序海报生成下载
01-04
小程序海报生成下载，适合商城推荐人等发展下级分销...
小程序海报制作
05-09
小程序海报制作，小程序海报合成，小程序海报简易合成
微信小程序实现canvas分享朋友圈海报
11-20
本文实例为大家分享了微信小程序分享朋友圈海报的具体代码，供大家参考，具体内容如下 思路：生成朋友圈海报放在公共文件，首先需要绘制canvas，点击分享朋友圈按钮，在手机屏幕看不见的地方（定位left：1000px）绘制出canvas，绘制完成将canvas转为图片显示。点击保存按钮，将本地缓存路径的图片下载到手机相册，在这里需要进行授权处理 untils.js文件 // 参数说明: mainImg 商品图 headImg 微信头像 onshareImg 二维码 goodsName 商品名称 goodsDec 商品描述 goodsTime 截图时间 goodsPrice 商品价格 callba
uni-app微信小程序生成海报.rar
02-07
【uni-app微信小程序生成海报】 在移动应用开发领域，uni-app是一个备受瞩目的框架，它由ECharts团队推出，旨在实现跨平台开发，支持包括微信小程序、H5、App等在内的多个平台。本教程将详细讲解如何使用uni-app来...
小程序 生成海报并保存到本地
Lenny-zlp的博客
09-09 532
部分代码 海报由后端生成 （二维码和背景图合成） 代码比较杂 需要哪部分看哪部分 <!-- 下载图片 --> <view class="picPop" wx:if="{{isHide}}"> <view class="pic"> <image src="data:image/png;base64,{{sharePic}}"></image> <view class="icon" bindtap="cl
uniapp微信小程序生成海报分享朋友圈的实现方法
07-27
要在Uniapp中实现微信小程序生成海报并分享到朋友圈，可以按照以下步骤进行： 1. 首先，需要使用Uniapp的相关插件或组件来生成海报图片。你可以使用一些第三方插件，比如`html2canvas`或`uni-html2canvas`，它们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值