Blazor.Extensions.Canvas 图片处理实战drawImage 与 createPattern 快速上手【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/CanvasBlazor.Extensions.Canvas 是微软 Blazor 生态中非常实用的 HTML5 Canvas API 实现它让 .NET 开发者无需编写一行 JavaScript就能用 C# 完成画布绘制、图片渲染与纹理填充。本文带你快速上手图片处理两大核心 APIdrawImage图片绘制与createPattern图案平铺无论你用的是 Blazor Server 还是 Blazor WebAssembly都能即学即用。为什么选择 Blazor.Extensions.Canvas 处理图片传统 Blazor 项目想在页面上画图要么引入复杂的 JS 库要么手写互操作代码。而 Blazor.Extensions.Canvas 将浏览器原生 Canvas 2D API 完整封装成了 C# 异步方法你只需要像写普通 .NET 代码一样调用即可。它同时支持 Canvas 2D 和 WebGL 两套上下文图片绘制相关能力由 Canvas2DContext.cs 提供堪称 Blazor 图片处理的开箱即用方案。环境准备最快的 3 步配置方法在开始画图之前先花 1 分钟完成配置第 1 步引入脚本文件在 WebAssembly 项目的index.html或 Server 项目的_Host.cshtml中加入script src_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js/script第 2 步注册命名空间在_Imports.razor中添加using Blazor.Extensions.Canvas第 3 步放置画布组件BECanvas Width400 Height300 ref_canvasReference/BECanvas然后在组件的OnAfterRenderAsync生命周期中获取 2D 上下文注意不能放在OnInitAsync此时画布元素尚未渲染到 DOMprotected BECanvasComponent _canvasReference; private Canvas2DContext _context; protected override async Task OnAfterRenderAsync(bool firstRender) { _context await _canvasReference.CreateCanvas2DAsync(); }drawImage 实战3 种重载一次讲清DrawImageAsync是 Blazor Canvas 图片绘制的入口在 Canvas2DContext.cs 中提供了三种重载覆盖从简单到复杂的全部场景。1. 基础绘制原尺寸贴图只指定目标坐标(dx, dy)图片按原始尺寸绘制await _context.DrawImageAsync(imageRef, 0, 0);2. 缩放绘制控制图片大小指定目标矩形(dx, dy, dWidth, dHeight)图片会被拉伸到指定尺寸await _context.DrawImageAsync(imageRef, 10, 10, 200, 150);3. 裁剪绘制9 参数精确抠图 ✂️这是最强大的重载先从原图(sx, sy, sWidth, sHeight)区域裁剪再绘制到目标(dx, dy, dWidth, dHeight)区域非常适合做头像裁剪、雪碧图取帧await _context.DrawImageAsync(imageRef, sx: 20, sy: 30, sWidth: 80, sHeight: 80, // 原图裁剪区域 dx: 0, dy: 0, dWidth: 120, dHeight: 120); // 目标绘制区域 注意第一个参数是ElementReference类型即页面中img元素的引用而非图片 URL 字符串。createPattern 实战打造无缝平铺背景createPattern是制作平铺背景、棋盘格、砖墙纹理的利器。它把一张图片变成可重复的「图案」再通过FillStyle应用于任意图形。认识 RepeatPattern 枚举平铺方向由 Canvas2DEnums.cs 中的RepeatPattern枚举控制枚举值含义适用场景Repeat水平垂直双向平铺最常见的背景纹理RepeatX仅水平平铺渐变条、分隔线RepeatY仅垂直平铺竖向条纹装饰NoRepeat不平铺只显示一次单张贴图三步创建平铺背景// 第 1 步创建图案返回图案的唯一标识 var pattern await _context.CreatePatternAsync(imageRef, RepeatPattern.Repeat); // 第 2 步将图案设置为填充样式 await _context.SetFillStyleAsync(pattern); // 第 3 步用矩形覆盖整个画布 await _context.FillRectAsync(0, 0, 400, 300);底层原理是createPattern在 blazor.extensions.canvas.js 中以 UUID 为键保存真实图案对象当你把该标识设为fillStyle时JS 端会自动还原为真正的 Canvas 图案C# 侧无需关心细节。综合案例给应用绘制一张纹理背景图把前面两个 API 组合起来实现「先铺背景、再叠内容」的完整效果protected override async Task OnAfterRenderAsync(bool firstRender) { _context await _canvasReference.CreateCanvas2DAsync(); // 1. 平铺背景 var bgPattern await _context.CreatePatternAsync(_bgImageRef, RepeatPattern.Repeat); await _context.SetFillStyleAsync(bgPattern); await _context.FillRectAsync(0, 0, 400, 300); // 2. 在背景上绘制主角图片居中缩放 await _context.DrawImageAsync(_heroImageRef, 150, 100, 100, 100); // 3. 叠加文字 await _context.SetFillStyleAsync(white); await _context.SetFontAsync(24px sans-serif); await _context.FillTextAsync(Hello Blazor Canvas!, 20, 280); }性能优化技巧善用调用批处理 ⚡Canvas 每次 JS 互操作都有开销Blazor.Extensions.Canvas 内置了自动批处理机制见 RenderingContext.cs连续调用会排队合并成一次互操作性能友好。在 Blazor Server 场景下建议用BeginBatchAsync/EndBatchAsync显式包裹绘制操作保证所有绘制在同一批次内同步提交避免画面互相覆盖。await _context.BeginBatchAsync(); // 这里放置一批绘制调用 await _context.FillRectAsync(0, 0, 100, 100); await _context.DrawImageAsync(imageRef, 20, 20, 60, 60); await _context.EndBatchAsync();常见问题与避坑指南Q1图片画不出来控制台报错检查img元素是否已加载完成。图片资源是异步加载的务必在图片onload之后再调用绘制否则 Canvas 拿到的是空图像。Q2为什么在OnInitAsync里拿不到上下文因为此时canvas元素还没有被渲染到页面必须等OnAfterRenderAsync触发、DOM 就绪后再调用CreateCanvas2DAsync。Q3图案没有平铺只显示了一张确认RepeatPattern传参正确并检查填充时使用的是FillRectAsync覆盖整个目标区域而不是只填一个小矩形。掌握drawImage与createPattern这两个 API你就解锁了 Blazor Canvas 图片处理的绝大部分能力从贴图、缩放、裁剪到无缝平铺背景全部可以用纯 C# 实现。配合批处理机制无论是简单的图片墙还是复杂的游戏场景都能轻松驾驭。赶紧在你的 Blazor 项目中动手试试吧【免费下载链接】CanvasHTML5 Canvas API implementation for Microsoft Blazor项目地址: https://gitcode.com/gh_mirrors/canvas/Canvas创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
