微信小程序生成海报并保存在本地（组件开发）

1、将商品图片和二维码生成海报在屏幕中间

子组件代码

<template><view><div class="poster"><div class="posterBox"><div class="posterCard"><canvas canvas-id="posterCanvas" class="myCanvas"style="background-color: #FFFFFF;width:660rpx;height:920rpx;"></canvas></div><view class="poserBtn" @click="getAlbum">保存至相册</view></div></div></view>
</template><script>export default {props:{isshow:{type: Boolean},//商品图片pic: {type: String,default: function() {return ''}},// 商品名称prodName: {type: String,default: function() {return ''}},// 商品金额price: {type: String,default: function() {return 0}},// 二维码图片erQured: {type: String,default: function() {return '/images/08d31f6bda294b91a5ce568f4006f563.png'}},},data() {return {imgPic: "",value:'1'}},onLoad() {},created() {this.getShare()uni.showLoading({title: "专属海报来啦...",mask: true});},methods: {closePopup(){console.log('ooo');let _that = this_that.$emit('fatherMethod',false)},getShare() {var _this = this;uni.downloadFile({url: this.pic,success: function(res) {console.log(res)_this.imgPic = res.tempFilePath;console.log(_this.imgPic)_this.drawImage()}})},drawImage() {var _that = thisconst InfoSync = uni.getSystemInfoSync();let bili = InfoSync.windowWidth / 375 * 1;const ctx = uni.createCanvasContext("posterCanvas", this);//背景色ctx.fillStyle = '#FFFFFF';ctx.fillRect(0, 0, 330 * bili, 500 * bili);// imagectx.drawImage(_that.imgPic, 25 * bili, 10 * bili, 280 * bili, 280 * bili);ctx.save();//商品价格ctx.setFillStyle("#333333");ctx.setFontSize(26 * bili);// ctx.setTextAlign("bottom");ctx.fillText(_that.price, 37 * bili, 325 * bili);//商品名称ctx.setFillStyle("#333333");ctx.setFontSize(14 * bili);ctx.fillText(_that.prodName, 37 * bili, 360 * bili);//识别二维码访问ctx.fillText('长按识别二维码访问' , 37 * bili, 400 * bili);ctx.drawImage(_that.erQured, 220 * bili, 370 * bili, 80 * bili, 80 * bili);ctx.save();ctx.draw()wx.hideLoading();},//获取画布，需要延时进行，否则获取到的画布为空getCanves(){var _that = thissetTimeout(() => {wx.canvasToTempFilePath({canvasId: 'posterCanvas',success: function(res) {_that.savePoster(res.tempFilePath)},fail: function(res) {console.log(res.errMsg)}}, this)}, 1000)},//将获取到的画布传值进行保存savePoster(shareImagePath) {var that = thissetTimeout(() => {wx.saveImageToPhotosAlbum({filePath: shareImagePath,success(res) {wx.showToast({title: '保存成功',icon: 'none'})setTimeout(() => {wx.hideLoading()that.$emit('fatherMethod',false)}, 300)},fail() {wx.showToast({title: '保存失败，请刷新页面重试',icon: 'none'})setTimeout(() => {wx.hideLoading()}, 300)}})}, 500)},//在保存之前先判断用户是否授权getAlbum() {var that = this;wx.showLoading({title: '正在保存...',mask: true})wx.getSetting({success(res) {if (res.authSetting["scope.writePhotosAlbum"]) {that.getCanves();} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {wx.authorize({scope: "scope.writePhotosAlbum",success() {that.getCanves();},fail() {wx.hideLoading();wx.showToast({title: "您没有授权，无法保存到相册",icon: "none"});}});} else {wx.openSetting({success(res) {if (res.authSetting["scope.writePhotosAlbum"]) {that.getCanves();} else {wx.showToast({title: "您没有授权，无法保存到相册",icon: "none"});}}});}},fail: err => {wx.hideLoading();wx.showToast({title: "出现了错误，请稍后再试",icon: "none"});}});}}}
</script><style lang="scss">.poster {height: 50vh;.closePopup{width: 30rpx;height: 30rpx;position: fixed;right: 40rpx;top: 260rpx;}.posterBox {padding-top: 30rpx;.posterCard {width: 660rpx;height: 900rpx;margin: 0 auto;background-color: #FFFFFF;box-shadow: 0px 0px 8px 0px rgba(10, 2, 4, 0.04);}.poserBtn {width: 630rpx;height: 80rpx;background-color: #D32B20;border-radius: 10rpx;margin: 0 auto;margin-top: 100rpx;font-size: 28rpx;color: #FFFFFF;text-align: center;line-height: 80rpx;}}}
</style>

<!-- 生成海报 start --><u-popup v-if="isshow" :show="isshow" @close="close('isshow')" ><view class="poster"><canvas-paint :pic='info.pic' :erQured='codeImg' :prodName='info.prodName' :price='price'@fatherMethod="clickMe"></canvas-paint></view></u-popup>

 import canvas '@/component/canvas'

微信小程序生成海报并保存在本地（组件开发）相关推荐

微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序生成海报无法保存到相册
公司小程序是用uniapp开发的,使用saveImageToPhotosAlbum()保存,在微信开发者工具中和真机调试都能正常运行,代码如下,在安卓真机上可以生成海报但是无法保存,苹果手机上直接无法 ...
微信小程序下载网络图片保存到本地
微信小程序下载网络图片保存到本地问题背景前一篇文章介绍了,微信小程序网络请求数据并在页面列表显示(参考 https://blog.51cto.com/baorant24/6189453 ),本文将 ...
微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
微信小程序生成海报带二维码功能
wxml文件 <view><text class='shareText'>生成海报分享至</text><view class='imgBox'>< ...
微信小程序下载图片保存到本地
<image src="{{image}}" class="slide-image" mode="widthFix" bindload ...
微信小程序生成海报下载到本地手机本地
里面有注释,这个就不详细说了,把对应的的图片路径换掉,就可以完成运行了 index.js 在这里有一个问题,所以在ctx.draw里面设置了一个定时器,因为官方文档说在ctx.draw回调中会绘制完成 ...
微信小程序生成海报中二维码-----长按识别不了问题及处理方案
> 问题描述: 小程序某个页面中点击按钮,想要生成带有二维码的图片,后续保存本地.生成图片后转发微信中,后长按图片不会出现识别图中二维码的选项问题. 一年前写过一个分享页,当时大部分可以识别,只 ...
微信小程序生成海报失败问题解决方法
很多业务需求需要获取到微信头像,然后用头像和二维码及其他背景图一起生成海报,进行分享.在部分机型会出现生成失败问题.以下是本人排除后发现产生问题的原因和解决方法. 1.安卓机提示downloadFil ...

微信小程序生成海报并保存在本地（组件开发）

微信小程序生成海报并保存在本地（组件开发）相关推荐

最新文章

热门文章