Question

我正在尝试通过调用ajax并使用水印js渲染从代码背后动态获取图像标签。但是带有data：的img标签不会第一次显示，而是在刷新时显示。谷歌浏览器没有问题。 no images images on reloading

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    if (isFirefox) {
        var script = document.createElement('script');
        script.type = "text/javascript";
        //script.src = "~/js/bluebird.min.js";
        script.src = "https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.5.3/bluebird.core.min.js";
        document.getElementsByTagName('head')[0].appendChild(script);

        var script2 = document.createElement('script');
        script2.type = "text/javascript";
        script2.src = "~/js/json2.js";
        document.getElementsByTagName('head')[0].appendChild(script2);
    }

$.ajax({
        url: url,
        type: "POST",
        async: true,
        contentType: "application/json;charset=utf-8",
        dataType: "text",
        success: function (json) {
            debugger;
            // alert(json);
            var jsonn = $.parseJSON(json);
            var jsonn1 = $.parseJSON(jsonn.d);
            var Namestring = "Name:" + jsonn1[0].name;
            Namestring += " Code:" + jsonn1[0].code;
            var string = " Longitude:" + jsonn1[0].longitude;
            string += " Latitude:" + jsonn1[0].latitude;
            string += " Date: " + jsonn1[0].create_date + "";
            var dealer_photo = jsonn1[0].dealer_photo;
            var user_photo = jsonn1[0].user_photo;
            var user_sign = jsonn1[0].user_sign;
            var dealer_sign = jsonn1[0].dealer_sign;

            var text = watermark.text;

            watermark([dealer_photo])
                .image(text.lowerRight('' + Namestring + '', '8px Times New Roman', '#fff', 0.0, 280))
                .render()
                .image(text.lowerRight('' + string + '', '8px Times New Roman', '#fff', 0.0, 300))
                .then(function (img) {
                    $("#dealer_photo").append(img);
                    //$("#hdnimgSRC").val($("#appendNew img").attr('src'));
                });



        },
        error: function OnError(xhr, errorType, exception) {
            debugger;
            var responseText;
            try {
                responseText = jQuery.parseJSON(eval("(" + xhr.responseText + ")"));
                alert(responseText);
            }
            catch (e) {
                responseText = xhr.responseText;
                alert(responseText);
            }
        }
    });

在此处添加从Web方法调用的代码

 [WebMethod]
    public static string FetchImage()
    {
        FetchImage _FetchImage = new FetchImage();

        string res = _FetchImage.BindImage(name, id);

        return res;
    }
  public string BindImage(string name, string id)
    {
        string json = string.Empty;
        DataSet ds = new DataSet();
        System.Web.Script.Serialization.JavaScriptSerializer jSearializer =
                           new System.Web.Script.Serialization.JavaScriptSerializer();

        List<ImageBind> details = new List<ImageBind>();

        try
        {
            //FetchImage obj = new FetchImage();

            using (SqlConnection con = new SqlConnection(connectionString))
            {
                using (SqlCommand cmd = new SqlCommand("sp_FetchImage", con))
                {
                    con.Open();
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("@name", name);
                    cmd.Parameters.AddWithValue("@id", id);
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        //obj.latitude = ds.Tables[0].Rows[0]["latitude"].ToString();
                        //list.Add(obj);
                        ImageBind deta = new ImageBind();
                        deta.latitude = ds.Tables[0].Rows[0]["latitude"].ToString();
                        deta.longitude = ds.Tables[0].Rows[0]["longitude"].ToString();
                        deta.code = ds.Tables[0].Rows[0]["code"].ToString();
                        deta.name = ds.Tables[0].Rows[0]["name"].ToString();
                        deta.user_photo = ds.Tables[0].Rows[0]["user_photo"].ToString();
                        deta.dealer_photo = ds.Tables[0].Rows[0]["dealer_photo"].ToString();
                        deta.dealer_sign = ds.Tables[0].Rows[0]["dealer_sign"].ToString();
                        deta.user_sign = ds.Tables[0].Rows[0]["user_sign"].ToString();
                        deta.create_date= ds.Tables[0].Rows[0]["create_date"].ToString();
                        details.Add(deta);
                        json = JsonConvert.SerializeObject(details);

                    }



                    con.Close();
                }
            }
        }
        catch (Exception ex)
        {

        }
        return json;

    }

图像数据为base64格式

Answer 1

注释附加的.image函数，该函数将再次添加水印。这应该可以解决问题。

问题也可能是因为使用了base64字符串。如果您使用文件参考，此问题将得到解决

watermark([dealer_photo])
                .image(text.lowerRight('' + Namestring + '', '8px Times New Roman', '#fff', 0.0, 280))
                .render()
                //.image(text.lowerRight('' + string + '', '8px Times New Roman', '#fff', 0.0, 300))
                .then(function (img) {
                    $("#dealer_photo").append(img);
                    //$("#hdnimgSRC").val($("#appendNew img").attr('src'));
                });

无法在Firefox中查看img标签

1 个答案: