Question

我正在使用Zxing创建将在浏览器中呈现的内存中条形码，但是我怀疑条形码二进制文件需要更多数据才能被浏览器正确解释。

以前，我将其用作扩展方法，呈现了以下HTML

 <img width="250" height="250" alt="Authentication Barcode" 
  src="data:image/png;base64,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">

但是，相同的方法似乎不能用作ActionResult。我应该考虑采用什么其他方法制作此渲染器？

    [ResponseCache(Location = ResponseCacheLocation.None, NoStore = true)]
    public IActionResult QRCode()
    { 
        // string url, string alt = "QR code", int height = 500, int width = 500, int margin = 0)
        var content = "https://example.net/go?asf";
        var width = Convert.ToInt32(250);
        var height = Convert.ToInt32(250);
        var margin = Convert.ToInt32(0);

        var qrWriter = new ZXing.BarcodeWriterPixelData
        {
            Format = ZXing.BarcodeFormat.DATA_MATRIX,
            Options = new QrCodeEncodingOptions { Height = height, Width = width, Margin = margin }
        };

        var pixelData = qrWriter.Write(content);

        // creating a bitmap from the raw pixel data; if only black and white colors are used it makes no difference
        // that the pixel data ist BGRA oriented and the bitmap is initialized with RGB
        // the System.Drawing.Bitmap class is provided by the CoreCompat.System.Drawing package
        using (var bitmap = new System.Drawing.Bitmap(pixelData.Width, pixelData.Height, System.Drawing.Imaging.PixelFormat.Format32bppRgb))
        using (var ms = new MemoryStream())
        {
            // lock the data area for fast access
            var bitmapData = bitmap.LockBits(new System.Drawing.Rectangle(0, 0, pixelData.Width, pixelData.Height),
               System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppRgb);
            try
            {
                // we assume that the row stride of the bitmap is aligned to 4 byte multiplied by the width of the image
                System.Runtime.InteropServices.Marshal.Copy(pixelData.Pixels, 0, bitmapData.Scan0,
                   pixelData.Pixels.Length);
            }
            finally
            {
                bitmap.UnlockBits(bitmapData);
            }
            // save to stream as PNG
            bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
            var barcodeImageArray = new byte[ms.Length];
            ms.Read(barcodeImageArray, 0, barcodeImageArray.Length);

            string filename = "login.png";
            string contentType;
            new FileExtensionContentTypeProvider().TryGetContentType(filename, out contentType);
            var timestamp = DateTime.UtcNow;

            // Strong vs weak etag: https://stackoverflow.com/questions/3043729/weak-etags-and-last-modified#3050762
            var tag = new EntityTagHeaderValue(new Microsoft.Extensions.Primitives.StringSegment("\""+ timestamp.Ticks.ToString() + "\""), isWeak: false);

            return File(barcodeImageArray, contentType, timestamp, tag);
        }
    }

以下是有关好图像的Fiddler痕迹：

这是“残破”图像的输出

最后，这是对上述功能的更改，以使其能够使用Razor帮助器在浏览器中呈现

   // Continue from script above where PNG is saved to stream 
            bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

            output.TagName = "img";
            output.Attributes.Clear();
            output.Attributes.Add("width", width);
            output.Attributes.Add("height", height);
            output.Attributes.Add("alt", alt);
            output.Attributes.Add("src",
               String.Format("data:image/png;base64,{0}", Convert.ToBase64String(ms.ToArray())));
        }

我如何正确地将此条形码字节[]渲染为可在浏览器中显示的图像？

0 个答案: