微信小程序生成分享海报完美解决

可以相信我说的话，但不要当真。

官方文档地址

代码文档上都有这里面有个坑这里面的像素单位是 像素点 是iOS的像素比

<!--index.wxml-->
<view class="container"><image src="{{shareImage}}" class="share-image"></image><canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:getImage="eventGetImage"/><button bind:tap="eventDraw">绘制</button><button bind:tap="eventSave">保存到本地</button>
</view>

//index.jsPage({data: {painting: {},shareImage: ''},onLoad () {// this.eventDraw()},eventDraw () {wx.showLoading({title: '绘制分享图片中',mask: true})this.setData({painting: {width: 375,height: 555,clear: true,views: [{type: 'image',url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',top: 0,left: 0,width: 375,height: 555},{type: 'image',url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',top: 27.5,left: 29,width: 55,height: 55},{type: 'image',url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',top: 27.5,left: 29,width: 55,height: 55},{type: 'text',content: '您的好友【kuckboy】',fontSize: 16,color: '#402D16',textAlign: 'left',top: 33,left: 96,bolder: true},{type: 'text',content: '发现一件好货，邀请你一起0元免费拿！',fontSize: 15,color: '#563D20',textAlign: 'left',top: 59.5,left: 96},{type: 'image',url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',top: 136,left: 42.5,width: 290,height: 186},{type: 'image',url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',top: 443,left: 85,width: 68,height: 68},{type: 'text',content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',fontSize: 16,lineHeight: 21,color: '#383549',textAlign: 'left',top: 336,left: 44,width: 287,MaxLineNumber: 2,breakWord: true,bolder: true,},{type: 'text',content: '￥0.00',fontSize: 19,color: '#E62004',textAlign: 'left',top: 387,left: 44.5,bolder: true},{type: 'text',content: '原价:￥138.00',fontSize: 13,color: '#7E7E8B',textAlign: 'left',top: 391,left: 110,textDecoration: 'line-through'},{type: 'text',content: '长按识别图中二维码帮我砍个价呗~',fontSize: 14,color: '#383549',textAlign: 'left',top: 460,left: 165.5,lineHeight: 20,MaxLineNumber: 2,breakWord: true,width: 125}]}})},eventSave () {wx.saveImageToPhotosAlbum({filePath: this.data.shareImage,success (res) {wx.showToast({title: '保存图片成功',icon: 'success',duration: 2000})}})},eventGetImage (event) {console.log(event)wx.hideLoading()const { tempFilePath, errMsg } = event.detailif (errMsg === 'canvasdrawer:ok') {this.setData({shareImage: tempFilePath})}}
})

.share-image {width: 600rpx;height: 888rpx;margin: 0 75rpx;border: 1px solid black;/* overflow: hidden */
}button {margin-top: 20rpx;
}

在 json这个文件引入

{"navigationBarTitleText": "李大玄","usingComponents": {"canvasdrawer": "/components/canvasdrawer/canvasdrawer"}
}

page的同级目录进行引入资源

微信小程序生成分享海报完美解决相关推荐

uniapp微信小程序生成分享海报(模板自取)
uniapp微信小程序生成分享海报模板 1.模板自取 2.可自行按需求更改调整 3.效果图如下: 生成前 -----> 生成后的图需知:博主的实现效果是先把需要生成的图片排版成静态页面,再点 ...
微信小程序生成分享海报组件
效果图官方文档地址你看着!!! 代码文档上都有这里面有个坑这里面的像素单位是像素点是iOS的像素比 wxml  <view class=& ...
小程序生成分享海报，带小程序码，并保存图片
小程序生成分享海报,带小程序码话不多说,先上效果图效果图不是重点,海报基本都是大同小异,都是一些信息,加上一个小程序码,重点是如何将所有要素整合成跟效果图一样的图片.我们知道如果是H5的话,有ht ...
uniapp 微信小程序分享海报
uniapp 微信小程序分享海报下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报.例如,我们可以在新页面中显示一张图片和一些 ...
微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
微信小程序生成分享图然后保存图片分享朋友圈
微信小程序可以实现快速的转发好友实现分享,但是不能直接分享到朋友圈,但是有需要要这么做,要怎么实现呢? 查看文档之后,大概有了实现思路 1.使用微信小程序的wx.createCanvasContext ...
微信小程序生成(painter)海报
这是我目前接触到的比较好用的海报插件了官方还有wxml-to-canvas 不会用有很多标签样式上不去界面化生成,可以直接布局 GitHub 地址这个案例可以直接下载然后打开就是一个小程序, ...
小程序生成分享海报并转发朋友圈（超全版）
前言在使用小程序canvas生成分享海报过程中,学到了一些可以优化的方案,在这里记录一下,方便以后使用文章目录前言屏幕适配字体加粗实现文本的换行 canvas'伪'层级绘制网络图片的绘制 ...

微信小程序生成分享海报完美解决

可以相信我说的话，但不要当真。

微信小程序生成分享海报完美解决相关推荐

最新文章

热门文章

微信小程序生成分享海报 完美解决

可以相信我说的话，但不要当真。

微信小程序生成分享海报 完美解决相关推荐

最新文章

热门文章

微信小程序生成分享海报完美解决

微信小程序生成分享海报完美解决相关推荐