微信小程序canvas绘制自适应图片，UniApp canvas绘制自适应图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序canvas绘制自适应图片，UniApp canvas绘制自适应图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：画布宽高为686 * 686 的正方形（可以进行调整根据自身需要来）

当图片宽度大于高度时，对图片宽度进行裁剪

当图片高度大于宽度时，对图片高度进行裁剪

我是用uniApp进行开发的，如果是小程序原生，直接把“uni” 改为 “wx”’

<canvas style="width:686rpx, height:686rpx" type="2d"  canvas-id="firstCanvas" id="firstCanvas"></canvas>

init() {
				const query = uni.createSelectorQuery().select('#firstCanvas').fields({
					node: true,
					size: true
				}).exec((res) => {
                    //这里的代码不能少 适配start
					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)
                    //这里的代码不能少 适配end
			
					
					// 绘制背景图片 , 
					ctx.beginPath();
					let imgDrawWidth = this.rpxToPx(686); // 图片绘制区域的宽度 (可以调整)
					let imgDrawHeight = this.rpxToPx(686); // 图片绘制区域的高度(可以调整)
					let canvasRatio = imgDrawWidth / imgDrawHeight;// 图片绘制区域的宽高比例
					let image = canvas.createImage(); //创建iamge实例
					image.src ='https://img0.baidu.com/it/u=1885009107,1276967789&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677258000&t=6f5b311ecc21d4c80e5b932b95590ddd';
					// 图片的宽高比例
					image.onload = (e) => {
						console.log("height",image.height)
						console.log("width",image.width)
						let imgRatio = image.width / image.height;
						let dx, dy, dw, dh;
						if (imgRatio <= canvasRatio) {
							dw = image.width;
							dh = image.width;
							dx = 0;
							dy = (image.height - image.width) / 2;					
						} else { 
							dw = image.height;
							dh = image.height;
							dx = (image.width - image.height) / 2
							dy = 0;						
						}
						ctx.drawImage(image, dx, dy, dw, dh, 0,0,imgDrawWidth,imgDrawHeight) // 背景图  
					}
 				})
			},

文章来源地址https://www.toymoban.com/news/detail-701187.html

			// rpx转px
			rpxToPx(rpx) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			},

到了这里，关于微信小程序canvas绘制自适应图片，UniApp canvas绘制自适应图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！