微信小程序画布canvas制作海报图片清晰度过低

最新推荐文章于 2024-09-19 16:39:47 发布

像素检测仪

最新推荐文章于 2024-09-19 16:39:47 发布

阅读量1.5k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序 javascript html5

本文链接：https://blog.csdn.net/qq_39981639/article/details/121890577

版权

微信小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文探讨了在微信小程序中，当在Canvas上绘制图片时出现图片模糊的问题。通过分析代码，发现关键在于适配设备像素比（DPR）。通过设置canvas的宽度和高度为原始尺寸乘以DPR，并使用`ctx.scale(dpr, dpr)`来调整比例，成功解决了图片模糊的问题，确保了在不同设备上图片的清晰显示。

摘要由CSDN通过智能技术生成

出现的问题

在制作时出现了在画布上画出来的图片特别糊的问题，原图清晰度是没问题的

定义画布

<canvas type="2d" id="canvas" style="width: 270px;height: 450px;">

</canvas>

在onLoad生命周期中声明画布

wx.createSelectorQuery()
	.select('#canvas')
    .fields({
    node: true,
    size: true,
	})
    .exec(that.init.bind(that))

创建画布

	init(res) {
        console.log(res)
        var that = this
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr)
        
        var bg = canvas.createImage();
        bg.src = 'https://s4.ax1x.com/2021/12/12/oqiBE6.jpg';
        // 在Canvas画布 添加图片
        bg.onload = () => {
            ctx.drawImage(bg, 0, 0, 270, 450);
        }
    },

解决方法就是上面创建画布中的这四行，

		const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = res[0].width * dpr;
        canvas.height = res[0].height * dpr;
        ctx.scale(dpr, dpr)