目录
3.canvas画布处于隐藏状态直接预览或是保存图片时,画布内容填充不完整或uni.canvasToTempFilePath报错问题。
1.保存后的图片为黑色背景问题
在开发过程中,会遇到一些透明图片或是整个画布的背景变成黑色。
解决方案1:在画布绘制填充之前,先给画布渲染一个白色背景。核心代码如下:
this.ctx.beginPath();
this.ctx.fillStyle = "white";
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
解决方案2:本方案未经校验,仅供参考,可结合方案1使用。
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>