H5 - 小程序Canvas海报小记

参考文献：github-海报
小程序在wepy框架上搭建

1、在生成海报的按钮结构中引入poster：

结构：

<poster id="poster" :config.sync="posterConfig"   ><view class="form-box img-box"><image mode="widthFix" src="/images/icon-button-after.png" class="imgs"></image><view>
</poster>

2、js中引入poster组件，并进行相关参数的配置

ps: 这只是在本地进行配置

// 组件
import poster from '../../components/poster/poster';export default class Index extends wepy.page {config = {navigationBarTitleText: '水晶魔幻宫廷',enablePullDownRefresh:true}components = {poster : poster}// 海报参数配置，rpx单位换算，px要乘以2data = {posterConfig: {// 配置海报默认参数，width: 1500,height: 3370,backgroundColor: '#ffffff',debug: false,//图片和文字参数配置：images: [// 左人物图{width: 700,height: 710,x: 115,y: 634,url: "/images/icon-ceshi.png"},// 右人物图{width: 470,height: 476,x: 920,y: 870,url: "/images/icon-ceshi.png"},// 二维码{width: 340,height: 340,x: 115,y: 2990,url: "/images/icon-code.png"},// 星星{width: 54,height: 54,x: 1135,y: 770,url: "/images/icon-xing.png",zIndex: 4},// 背景底图{width: 1500,height: 3370,x: 0,y: 0,url: "/images/icon-recur-bg.png",zIndex: 3},],// 文字：texts: [// 百分比{x: 900,y: 670,text: '99',fontSize: '144',color: 'white',opacity: 1,baseLine: 'middle',zIndex: 5},{// 百分比的投影x: 910,y: 685,text: '99',fontSize: '144',color: '#51518c',opacity: 1,baseLine: 'middle',zIndex: 4},// 百分比{x: 526,y: 3100,text: '乾隆皇帝',fontSize: '72',color: 'white',opacity: 1,baseLine: 'middle',zIndex: 4},// 文字介绍{x: 150,y: 1740,text: '【紫水晶】: 灵性水晶发，晶族中最极品的水晶，是发晶之王，是公司行号决策者最佳佩带的天然力量宝石。可增加能量聚集，象征尊贵、权力与财富，招偏财亦聚正财。',fontSize: '60',color: 'white',opacity: 1,width: 1180,lineNum: 4,      // 四行省略显示lineHeight: 90,marginLeft: 0,baseLine: 'middle',zIndex: 4},{x: 150,y: 2370,text: '【你的性格和乾隆皇帝最匹配】: 福人自有福命。很多人都觉得贤惠的女人在后宫注定是宫斗的牺牲品，可不要小看了贤惠的力量，它有着水滴石穿的能力，如果用得当，可以使自己拥有独有的人缘与魅力。',fontSize: '60',color: 'white'opacity: 1,width: 1180,lineNum: 5,lineHeight: 90,marginLeft: 0,baseLine: 'middle',zIndex: 4},]}}// ---- end ----// 配置posterevents = {'onPosterSuccess': (imageUrl,  $event) => {if(imageUrl) {// 链接到保存海报的页面地址var url = '/pages/poater/poater?imgUrl=' + imageUrlwx.navigateTo({url : url});// 第二种方法： 本地生成一个画布看效果wx.previewImage({current: imageUrl,urls: [imageUrl]})}},'onPosterFail': (err,  $event) => {console.log(err);}}// ---- end ----
}

3、pages保存海报的页面

<template>
<view class="g-poster-list"><view class='item-hd'><!-- 海报图 --><image class='imgs' src="{{imgUrl}}"  mode="widthFix" ></image></view><view class='f-poster-box' @tap='saveImage' data-img='{{imgUrl}}'><image mode="widthFix" src="/images/icon-recur-bg2.png" class="imgs"></image><view class="img-box"><image mode="widthFix" src="/images/icon-button-lg.png" class="imgs"></image></view></view>
</view>
</template>

js：

  import wepy from 'wepy';export default class Index extends wepy.page {config = {navigationBarTitleText: '水晶魔幻宫廷'}data = {imgUrl:""}onLoad(option) {var that = thisthis.imgUrl = option.imgUrl}methods = {// 保存图片saveImage(e) {var img = e.currentTarget.dataset.imgimg && wx.saveImageToPhotosAlbum({filePath: img,success : function() {wx.showToast({title: '保存图片成功',icon: 'success',duration: 2000})}})}}// ---- end ----}

效果：

H5 - 小程序Canvas海报小记相关推荐

小程序 canvas 海报（图片、字体封装方法）解决导出海报模糊问题
最近真是画了一堆canvas海报画到头秃~~~(偷偷说!!产品经理我恨你!!) 来和大家分享一波本媛写的canvas方法封装 1.封装图片 //width:图片长度 //height:图片高度 //x ...
uniapp 小程序 canvas海报---已封装
已封装好的代码 <template><view class="canvas-content"><canvas cla ...
小程序canvas商品海报绘制
小程序canvas海报绘制 1.html 绘制图片的元素 <view class="canvas-box"><canvas style="width: ...
小程序canvas绘制商品海报实现分享朋友圈
小程序canvas绘制商品海报实现分享朋友圈效果图: 实现步骤就是点击生成图片在canvas画布中画出一张海报然后保存在本地在imags标签中展示,此处尽可能的把canvas组件隐藏但是不能 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
小程序canvas生成海报保存至手机相册
小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2 ...
小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
mpvue 微信小程序canvas生成海报
mpvue 微信小程序canvas生成海报效果贴代码 html <template><view class="poster ...
小程序canvas生成海报
小程序canvas生成海报,画布转图片后可直接保存图片到系统相册: 海报素材使用图片宽750px: 注: 画布转图片时参数destWidth 值须 * dpr 否则IOS测试生成的图片是模糊的: . ...

H5 - 小程序Canvas海报小记

1、在生成海报的按钮结构中引入poster：

2、js中引入poster组件，并进行相关参数的配置

3、pages保存海报的页面

H5 - 小程序Canvas海报小记相关推荐

最新文章

热门文章