【uniapp】 生成海报


		
		<view class="canvas_show" v-show="isShare">
			<canvas canvas-id="shareCanvas" :style="'width:'+imgWidth+'px;height:'+imgHeight+'px'">canvas>
		view>
		
		<view class="" @tap="creat_img">
			海报
		view>
export default {
		data() {
			return {
				isShare:true,
				imgHeight:100,
				imgWidth:100
			}
		},
		onShow() {
			this.isShare = false
		},
		methods: {
			creat_img() {
				uni.showLoading({
					title: '生成海报中',
					mask:true
				});
				let that = this;
				that.isShare = true; //生成海报的时候要显示才可以
				var ctx = uni.createCanvasContext("shareCanvas");
				ctx.drawImage('/static/logo.png', 0, 0, that.imgWidth, that.imgHeight); //绘制黑色背景图
				setTimeout(function(){
					ctx.draw(true, that.canvasToTempFilePath());
				},200)
			},
			canvasToTempFilePath(type) {
				let that = this;
				setTimeout(function() {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0, 
						width: that.imgWidth,
						height: that.imgHeight,
						fileType: "jpg",
						quality: 1,
						canvasId: "shareCanvas", 
						success: function(res) {
							uni.hideLoading();
							that.shareImg = res.tempFilePath;
							console.log(that.shareImg);
							if (that.shareImg) {
								uni.previewImage({
									current: that.shareImg, // 当前显示图片的http链接
									urls: [that.shareImg], // 需要预览的图片http链接列表
									success() {
										setTimeout(function() {
											uni.hideLoading()
										}, 600);
									}
								});
							}
						},
						fail(res) {
							console.log(res);
						}
					}, that);
				}, 1000);
			},
		}
	}
我这个海报里有一个二维码还有一个头像名称和电话 不用的话可以删掉 
有问题联系我吧 v:1612803019

你可能感兴趣的:(【uniapp】)