请问下图片效果中的后端怎么实现的?

Question

效果图

前端代码

    <asp:DataList ID="DataList1" runat="server" style="margin-top: 10px; margin-left: 20px" Width="600px">
            <ItemTemplate>
               <fieldset>
                  <legend>
                            <asp:CheckBox ID="ckbFirstRole" runat="server" Text='<%# Eval("text") %>' onclick="SelectDept(this);" />
                  </legend>
                  <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("value") %>' />
                        <asp:CheckBoxList ID="chblRole" runat="server" Style="margin-left: 10px" DataSourceID="ObjectDataSource1" DataTextField="region_name" DataValueField="tax_no" RepeatColumns="8">
                        </asp:CheckBoxList>
                        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetChildRegion" TypeName="HXCRM.BLL.Bregion">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="HiddenField1" Name="node" PropertyName="Value" Type="String" />
                            </SelectParameters>
                        </asp:ObjectDataSource>
                </fieldset>
          </ItemTemplate>
    </asp:DataList> 

我猜测的是,先绑定DataList的DataSource然后在OnItemDataBound中调用ObjectDataSource的select()绑定CheckBoxList数据原,但前台代码中没有OnItemDataBound,就想不通了,有看懂的大哥指点下吧

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要使用ASP.NET与JavaScript结合创建图像效果，您可能需要考虑以下步骤：

1. 使用JavaScript将图像转换为HTML5 canvas元素。这通常通过canvas.toDataURL()来完成。

2. 将此canvas元素作为数据列表项的数据源绑定到您的DataList控件。

3. 在JavaScript中处理图像数据和数据列表项的更新。

这是一个基本示例：

首先，确保在您的项目中包含canvas-to-dataurl库，例如：<script src="https://cdn.jsdelivr.net/npm/canvas-to-dataurl"></script>。

接下来是JavaScript部分：

// 获取当前图像URL
var img = new Image();
img.src = "your-image-url-here";

// 创建Canvas对象
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;

// 创建ImageData对象
var dataUrl = canvas.toDataURL();

// 将ImageData对象添加到DataList项上
DataList1.DataSource.DataItems[0].Children[0].Children[0].Children[0].Attributes['data'] = dataUrl;

请注意，这只是一个基本示例，并不适用于所有场景或所有数据格式。为了获取最佳结果，请根据具体需求调整代码。