关于小程序生成海报

关于小程序生成海报并保存到本地相册

生成图片的过程

	toSetImage(obj,width,height,imgUrl,codeImg,text) {
		//obj是页面的this
		//with,height指的是canvas的宽高
		//imageUrl 指的的海报的图片
		//codeImg 指的的生成的邀请二维码的图片
		//text 文字说明
        var that = obj;
        //控制canvas的显示隐藏
        obj.canvasShow = true
        let myCanvas = uni.createCanvasContext('mycanvas', obj);
		myCanvas.rect(0,0,width,height)
		myCanvas.setFillStyle("#FFFFFF")
		uni.showLoading()
		//生成过程中的文组提示
		that.bottomTip="图片生成中..."
        //画布尺寸
        // 坐标(0,0) 表示从此处开始绘制,相当于偏移。
        //获取图片的临时路径保证图片加载完成之后再生成海报
        uni.getImageInfo({
            src: imgUrl,
            success: function (image) {
				
				var w=width
				var h=w*(image.height/image.width)
					console.log(h)
                //canvas生成图片的绘制部分
                myCanvas.drawImage(image.path, 0, 0, w,h);

				uni.getImageInfo({

				    src: 'https://static.tiandingyunfeng.com/whiteBg.jpg',
				    success: function (image) {

						var t=height*0.6
						var he=height*0.4
				        //canvas生成图片的绘制部分
				        myCanvas.drawImage(image.path,0, t, width,he);
						uni.getImageInfo({
							src:codeImg,
						    success: function (image) {
								if(text.length>10){
									text=text.substring(0,9)+'...'
								}

								var top=height*0.6+40
								var left =width/2-70
						        //canvas生成图片的绘制部分
						        myCanvas.drawImage(image.path,20, top, 100,100);
						        //必须使用绘制完成
								myCanvas.setFillStyle('#333333')//文字颜色:默认黑色
								myCanvas.setFontSize(16)//设置字体大小,默认10
								myCanvas.textAlign = 'left'	// 设置位置
								myCanvas.fillText(text ,130, top+32);
								myCanvas.setFillStyle('#999999')//文字颜色:默认黑色
								myCanvas.setFontSize(12)//设置字体大小,默认10
								myCanvas.textAlign = 'left'	// 设置位置
								myCanvas.fillText('长按扫码接受邀请' ,130, top+73);
								myCanvas.draw(true, () => {
									uni.hideLoading()
								    //生成canvas绘制生成的路径
								    uni.canvasToTempFilePath({
								        //cavas的id
								        canvasId: 'mycanvas',
										background:"#ffffff",
										fileType:"jpg",
								        success: (res) => {

								            // 在H5平台下,tempFilePath 为 base64
								            console.log(res)
								            that.imgurl = res.tempFilePath;
								            that.saveImage()
								            uni.showToast({
								                title: '生成成功',
								                duration: 2000
								            });

								        },
								        fail: (arr) => {
											uni.hideLoading()
								            console.log(arr);
								            uni.showToast({
								                title: '生成失败',
								                duration: 2000
								            });
											that.bottomTip="图片生成失败"
								        }
								    }, obj)

								});

						    },
						    fail: function (err) {
								uni.showToast("图片加载失败请点击重试")
									that.bottomTip="图片生成失败"
								uni.hideLoading()
								// uni.showToast({
								//     title: err.errMsg,
								//     duration: 2000
								// });
						        resolve(false);
						    }
						});
					},
					fail:function(){
						uni.showToast("图片加载失败请点击重试")
							that.bottomTip="图片生成失败"
						uni.hideLoading()
					},

					})


                //必须使用绘制完成

            },
            fail: function (err) {
				uni.showToast("图片加载失败请点击重试")
				that.bottomTip="图片生成失败"
				uni.hideLoading()
				// uni.showToast({
				//     title: err.errMsg,
				//     duration: 2000
				// });
                // resolve(false);
            }
        });



    },

保存图片

toSaveImage(obj) {
        var that = obj;
        //使用有保存图片到本地的权限
        uni.authorize({
            scope: "scope.writePhotosAlbum",
            success() {
                //保存图片到本地
                uni.saveImageToPhotosAlbum({
                    filePath: that.imgurl,//    图片文件路径,可以是临时文件路径也可以是永久文件路径,不支持网络图片路径
                    success: () => {
                        uni.showToast({
                            title: '保存成功',
                            duration: 2000
                        });
						that.bottomTip="已保存到相册,快去分享吧"
                    },
                    fail: () => {
                        uni.showToast({
                            title: '保存失败',
                            duration: 2000
                        });
						that.bottomTip="图片保存失败"
                    }
                });
            },
			fail(){
				uni.showToast({
				    title: '图片保存失败',
				    duration: 2000
				});
				that.bottomTip="图片未保存成功"
			}
        })


    },

完整的代码
另外附小程序获取元素的宽高的方法:

getCurrenBoxSize(dom){
		  return new Promise((res, rej) => {
			  
		          uni.createSelectorQuery().in(this).select(dom).fields({
		               size: true,
		               scrollOffset: true
		           }, (data) => {
					   console.log(data)
		                  res(data);
		           }).exec();
		    });
			
	
	},
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读