QRCodeでは、エラー修正レベルをH（High）に設定すると、30%のエラーを許容できます。これにより、QRCodeのスキャン性能を損なうことなく、QRCodeの上に画像を乗せてQRCodeをカスタマイズできます。ただし、QRCodeのサイズの1/3を超える大きさの画像を乗せることはお勧めしません。
Visual Studioで、新しいASP.Net Webアプリケーションを作成し、新しいWebフォームを追加します。次に、QRCodeにロゴを乗せるために、次の手順を実行します。
デザイナの場合
- ツールボックスで C1QRCode および C1BinaryImage コントロールを見つけ、それをWebフォームに配置します。
ツールボックスにこれらのコントロールが見つからない場合は、右クリックし、［アイテムの選択］を選択します。
［ツールボックスアイテムの選択］ダイアログボックスが表示されます。
コントロールを見つけたら、［OK］をクリックします。
- BinaryImageコントロールにImageURLを追加して、コントロールに画像を追加します。
- 次の表に示すように、コントロールのプロパティを設定します。
コントロール名 プロパティ 値 C1QRCode1 Text QRCode サンプルテキスト C1QRCode1 ErrorCorrectionLevel H C1QRCode1 ForeColor #CC0000 C1QRCode1 Height、Width 150px C1BinaryImage1 Height 85px C1BinaryImage1 Width 100px
ソースビューの場合
- 両方のコントロールを追加し、すべてのプロパティを設定すると、ソースビューのフォームのコードは次のようになります。
ソースコードビュー コードのコピー<cc1:C1QRCode id="C1QRCode1" runat="server" Text="QRCode サンプルテキスト" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <c1:C1BinaryImage id="C1BinaryImage1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />
-
<head></head>タグ内に次のコードを追加して、QRCodeとBinaryImageに適用するCSSクラスを作成し、画像とQRCodeを重ねます。ソースコードビュー コードのコピー<style type="text/css"> .qrcodeA1 { position:absolute; top: -1px; left: 4px; z-index: 1; } .imgB1 { position:absolute; top: 35px; left: 25px; z-index: 3; right: 759px; } </style>
-
CssClass それぞれのコントロールのタグ内で、次のようにプロパティを設定します。
ソースコードビュー コードのコピー<cc1:C1QRCode id="C1QRCode1" CssClass="qrcodeA1" runat="server" Text="QRCode サンプルテキスト" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <cc1:C1BinaryImage id="C1BinaryImage1" CssClass="imgB1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" />
ここまでの成果
プロジェクトを実行すると、次の図に示すように、ロゴを乗せてカスタマイズされたQRCodeが生成されます。
