微信小程序，canvas遇到的bug以及解决方案

目录

1.保存后的图片为黑色背景问题

2.canvas画布不清晰，模糊问题

3.canvas画布处于隐藏状态直接预览或是保存图片时，画布内容填充不完整或uni.canvasToTempFilePath报错问题。

4.canvas画布大小根据画布中的图片大小自适应问题

---

1.保存后的图片为黑色背景问题

在开发过程中，会遇到一些透明图片或是整个画布的背景变成黑色。

解决方案1：在画布绘制填充之前，先给画布渲染一个白色背景。核心代码如下：

this.ctx.beginPath();  
this.ctx.fillStyle = "white";  
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

解决方案2：本方案未经校验，仅供参考，可结合方案1使用。

微信小程序之 canvas绘图，海报图，分享图，二维码生成的图片在微信小程序真机测试为什么背景色是黑色的，在微信小程序开发者工具中是正常的白色_微信浏览器对于canvas绘制的图片显示成黑色-CSDN博客

2.canvas画布不清晰，模糊问题

参考一下链接：

微信小程序canvas画布不清晰解决方法_小程序 canvas 模糊-CSDN博客

3.canvas画布处于隐藏状态直接预览或是保存图片时，画布内容填充不完整或uni.canvasToTempFilePath报错问题。

解决方案：简单来说，就是把画布定位到屏幕之外，这样无论是隐藏还是显示的状态，用户都看不到。

<template>
    <view>
        <view class="btn" @click="sharePicture">
			<image src="../../static/FX/hb.png" mode=""></image>
			<text>分享图片</text>
		</view>
       <!-- 把画布定位到屏幕之外 -->
       <view class="CanvasBox" v-if="show">
		    <canvas type="2d" canvas-id="myCanvas" id="myCanvas" class="CanvasClass" :style="{height: canvasH+'rpx'}"></canvas>
        </view>
	</view>
</template>
<script>
    methods:{
           sharePicture(){
				uni.showLoading({
					title: '图片加载中',
					mask: true
				})
				//先获取图片的高度和宽度
				await this.imageData()
				this.show=true
				this.$nextTick(()=>{
					this.HuiZhiHuaBu()
				})
			},
            async HuiZhiHuaBu(){
                const query = wx.createSelectorQuery();
			    query.select('#myCanvas')
					.fields({
						node: true,
						size: true
					})
					.exec(async (res) => {
                        this.canvas = res[0].node;
						this.ctx = this.canvas.getContext('2d');
						//设置canvas画布宽高
						this.canvas.width = 750 // 获取宽
						this.canvas.height = this.canvasH
						//绘制画布。。。
                        //画布绘制完成后 预览图片
                        this.previewPicture()
                        
                    }
           }
            //预览图片
			previewPicture: function() {
				var that = this
				console.log(that.canvas,"预览that.canvas")
				
				uni.canvasToTempFilePath({
					// canvasId: 'myCanvas',
					canvas: that.canvas,
					x:0,
					y:0,
					fileType: "png",
					quality: 1,
					success: function(res) {
						let imageArray = []
						imageArray[0] = res.tempFilePath
						console.log(imageArray,"imageArray")
						uni.previewImage({
							current: 0,
							urls: imageArray,
							success: function(res){
								that.show = false
							},
							fail: function(err){
								that.show = false
							}
						})
					},
					fail: function(err) {
						console.log(err, "err")
						uni.$showMsg(err)
					}
				}, that)
			},
            //获取图片的宽和高
			async imageData() {
				//此处代码 在此省略
			},
     }
</script>
<style>
    .CanvasBox {
		position: fixed;
		left: 9999px;
	}
    .CanvasClass {
		width: 750rpx;
		border-radius: 10rpx;
		margin: 0 auto;
	}
</style>

4.canvas画布大小根据画布中的图片大小自适应问题

解决方案：绘制画布前，先获取图片高度，计算图片比例，根据比例缩放图片大小，图片大小确定后，计算画布高度，并动态给高度赋值。

<template>
    <view> 
       <view class="CanvasBox">
		    <canvas type="2d" canvas-id="myCanvas" id="myCanvas" class="CanvasClass" :style="{height: canvasH+'rpx'}"></canvas>
        </view>
	</view>
</template>
<script>
    computed:{
			// 海报高度
            //imageScale为画布中图片的 宽度与高度的比值，750为画布宽度，410为画布除图片外其他内容的高度，根据开发需求灵活调整。
			canvasH(){
				return Math.round((750/this.imageScale)+410)
			},
	},
    methods:{
          async huizhihuabu(){
                const query = wx.createSelectorQuery();
			    query.select('#myCanvas')
					.fields({
						node: true,
						size: true
					})
					.exec(async (res) => {
                        this.canvas = res[0].node;
						this.ctx = this.canvas.getContext('2d');
						//设置canvas画布宽高
						this.canvas.width = 750 // 获取宽
						this.canvas.height = this.canvasH
						//绘制画布。。。
                    }
           }

     }
</script>
<style>
    .CanvasClass {
		width: 750rpx;
		border-radius: 10rpx;
		margin: 0 auto;
	}
</style>