uniapp canvas生成海报 并保存到相册

 用的插件 这是地址https://ext.dcloud.net.cn/plugin?id=3276

用的插件 结果自己还踩了一堆坑  哎

首先引用组件的时候要让组件显示出来 不能隐藏可以选择定位然后放置到底层，当然要记得给上面的层级加个背景颜色，免得插件显示出来了

这是插件的调用和

canvasImage是要渲染的数据

 // 海报生成成功 getImg(e)

// 生成失败    fail(err)

<view class="poster-box">
      <lyz-canvas isRenderImage  :board="canvasImage" @success="getImg" @fail="fail">        
      </lyz-canvas>
</view>

<script>
    import lyzCanvas from "@/components/lyz-canvas/lyz-canvas.vue"//这是插件
    import {LastMayday} from "@/pages_Inside/index/components/json/palette.js"//这是要渲染的数据
    export default {
        components: {lyzCanvas},
        data() {
            return {
                dataObject:{
                image:"", //大图
                userImg:"", //头像
                title: "", //标题
                name: "", //昵称
                time: "", //时间
                prices: "", //价格
                address: "", // 地址
                remark:"", //详情
                codeimage:"",//小程序码
                },//海报参数
                posterUrl:"",//海报路径
                posterType:0,//海报生成情况 1，成功  2，失败
            }

        }
    }
</script>
<style lang="scss" scoped>
//海报 定位+放置底层
.poster-box{
  position: absolute;
  top: -999px;
  z-index: -1;
}
</style>

这是要渲染的数据

export const LastMayday = (data) => {
	return ({
		width: "680rpx",海报的宽度
		height: "900rpx",//高度
		background: "#FFFFFF",//背景颜色
		views: [
			{
				type: "view",//元素类别
				css: {
					width: "680rpx",
					height: "900rpx",
					top: "0rpx",//左上角定位top值
					left: "0rpx",//左上角定位top值
					rotate: "0",//边框弧度 圆的话用50%
					background: "#FFF",//当前元素的背景色
				},
			},
			{//大图
				type: "image",//图片
				url: data.image,//图片路径
				css: {
					width: "680rpx",
					height: "430rpx",
					top: "0rpx",
					left: "0rpx",
					rotate: "0",
					radius: "",
					borderWidth: "",
					borderColor: "#000000",
					shadow: "",
					mode: "scaleToFill",
				},
			},
			{//标题
				type: "text",
				text: data.title,//文本内容 这里的文本如果有换行符也会换行
				css: {
					color: "#000000",
					background: "rgba(0,0,0,0)",
					width: "600rpx",//宽度
					height: "25.740000000000002rpx",//相当于文本域高度
					top: "440rpx",
					left: "20rpx",
					rotate: "0",
					radius: "",
					borderWidth: "",
					borderColor: "#000000",
					shadow: "",
					padding: "0rpx",
					fontSize: "35rpx",//字体大小
					fontWeight: "normal",
					maxLines: "1",//文本有几行
					lineHeight: "25.974000000000004rpx",
					textStyle: "fill",
					textDecoration: "none",
					fontFamily: "",
					textAlign: "left",//对齐方式
				},
			},
    });
}

 然后在onLoad里面调用

3秒后执行，this.dataObject 是当前页面获取到的要渲染的数据

onLoad(options) {
    setTimeout(() => {
      // this.saveImgToLocal();
      if(this.dataObject.userImg!=''&&this.dataObject.codeimage!=''){
        this.canvasImage = new LastMayday(this.dataObject)
        console.log(this.dataObject,'this.dataObject');
      }
    }, 3000)
  },

在methods里

// 海报生成成功
    getImg(e) {
		console.log(e,'eeeeeee')
		this.posterUrl = e
        this.posterType=1
	},
    // 生成失败
    fail(err) {
        console.log("fail:" + JSON.stringify(err),"failfailfailfailfailfail");
        this.posterType=2
    },
    // 点击生成贴图
    beginCanvas() {
      uni.showLoading({
        title: '海报生成中'
      })
      this.orderTimer = setInterval(() => {
        this.getquery()
      }, 1000)
      
    },
    //海报生成状态查询
    getquery(){
      if(this.posterType==1){
        setTimeout(() => {
          uni.hideLoading()
          clearInterval(this.orderTimer)
          this.myshow = true
          this.show = false
        }, 1000)
      }else if(this.posterType==2){
        setTimeout(() => {
          uni.hideLoading()
          clearInterval(this.orderTimer)
          this.canvasImage = new LastMayday(this.dataObject)
          this.posterType=0
        }, 1000)
      }
    },
    //保存图片(){
    SaveImage(index) {
      let  _this = this
      if (index == 1) {
        // 取消保存
        _this.myshow &