locked
Dynamically added images from canvas fail to render (black box) RRS feed

  • Question

  • User1059692467 posted

    I'm inserting images in a Crystal Report from image data in the DB (Crystal reports version 13). I've done it before with images saved from a file import and from a QR code encoder but trying to save and display them from a canvas seems to fail. I'm passing the canvas data to a webservice using json and jquery. The data seems to be ok, i can load the images in the browser, this is my latest attempt, i've been trying multiple ways of saving and multiple file formats (thinking that there is an opacity layer that is causing the black box  )... note this is a ASP.net, C#, SQL Server, Jquery application.

    capture the canvas and pass it to the webservice

     function SaveImage() {
                var PrevSigID = $('#<%=hdnImageID.ClientID%>').val();
                if (PrevSigID == "0") {
                    var canvas = document.getElementById("simple_sketch");
                    var image = canvas.toDataURL("image/png");

                    var MyObj = new Object();
                    MyObj.SignatureID = 0;
                    MyObj.imageData = image;

                    POST("Webservice.asmx/SaveServiceReportSignature", JSON.stringify(MyObj), function (CB) {
                        if (typeof CB === 'undefined' || CB === null) {
                            alert('Error saving service report signature. Please contact Stride Systems.');
                        } else {
                            if (CB.Message != null) {
                                $('#<%=hdnImageID.ClientID%>').val(CB.Message);
                                return false;
                            }
                        }
                    });
                } else {
                    return false;
                }
            }

    Save the passed data

        [WebInvoke(ResponseFormat = WebMessageFormat.Json)]
        [WebMethod(EnableSession = true)]

        public string SaveServiceReportSignature(int SignatureID, string imageData)
        {
            try
            {
                CallbackHelper cbh = new CallbackHelper();
                cbh.AllGood = true;

                var base64Data = Regex.Match(imageData, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
                byte[] imageBytes = Convert.FromBase64String(base64Data);

                MemoryStream ms = new MemoryStream(imageBytes);
               
                Image imagebmp = Image.FromStream(ms);
                ms.Close();
                Bitmap bmp = new Bitmap(imagebmp );
                // ImageConverter converter = new ImageConverter();
                
                // byte[] blah = (byte[])converter.ConvertTo(bmp, typeof(byte[]));
                 MemoryStream ms2 = new MemoryStream();
                 bmp.Save(ms2, ImageFormat.Png);
                 ms2.Close();
                 byte[] blah2 = ms2.ToArray();
                 
                if (imageBytes.Length > 0)
                {
                    ServiceReport.Signature Signature = new ServiceReport.Signature();
                    Signature.ID = 0;
                    Signature.Name = "";
                    Signature.Data = blah2;
                    Signature.ContentType = "image/png";
                    Signature.Size = blah2.Length;

                    if (Signature.Size > 0 && SignatureID == 0)
                    {
                        cbh.Message = ServiceReport.Signature.Insert(Signature).ToString();
                    }
                    else
                    {
                        cbh.Message = SignatureID.ToString();
                        ServiceReport.Signature.Update(Signature);
                    }
                }

                return JsonConvert.SerializeObject(cbh);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

    this makes an image loadable in the browser, but when i try and put it into the report all i get is a black box

    Thursday, March 31, 2016 3:10 PM

Answers

  • User1059692467 posted

    fixed it with...

     var base64Data = Regex.Match(imageData, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
                byte[] imageBytes = Convert.FromBase64String(base64Data);

                MemoryStream ms = new MemoryStream(imageBytes);
               
                Image imagebmp = Image.FromStream(ms);
                ms.Close();
                Bitmap bmp = new Bitmap(imagebmp );
               
                 MemoryStream ms2 = new MemoryStream();
               //  bmp.Save(ms2, jgpEncoder, myEncoderParameters);
                 //bmp.MakeTransparent(Color.Black);
                 Bitmap target = new Bitmap(bmp.Size.Width, bmp.Size.Height);
                 Graphics g = Graphics.FromImage(target);
                 g.Clear(Color.White);
                 g.DrawRectangle(new Pen(new SolidBrush(Color.White)), 0, 0, target.Width, target.Height);
                 g.DrawImage(bmp, 0, 0);
                
                 target.Save(ms2, ImageFormat.Bmp);
                 ms2.Close();
                 byte[] blah2 = ms2.ToArray();

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 31, 2016 6:57 PM