Get the preview of the base64 format of the picture data adjustment background interface plus watermark can not be obtained

call the mobile camera to take a picture through input file (select the image on PC), obtain the FileReader preview of the image, and then transfer the acquired base64 to the backend API for watermarking, and the API still returns the format of base64 with watermark. The
code goes like this:

//
$(".mui-input-row input").change(function(e){
    var _this = this;
    var files = e.target.files;
    var reader = new FileReader();
    
    reader.onload = function(){
        var url = this.result;
        var urlSplit = url.split(",")[1];
        
        //
        addWaterMark(urlSplit,_this);
        
        //$(_this).siblings("img").attr("src",url);
        
    };
    
    reader.readAsDataURL(files[0]);
});

/ / add watermark
function addWaterMark (urlSplit,element) {

var inputBase64 = urlSplit;
var dataJson={
    "text" : "",
    "inputBase64" : inputBase64
};

console.log("============== :"+JSON.stringify(dataJson));


$.ajax({
    type: "post",
    url: apc_rest_host + "rest/processModelServiceRest/addTextToImage4Base64",
    contentType: "application/x-www-form-urlencoded; charset=utf-8",
    async: false,
    data:dataJson,
    dataType: "json",
    crossDomain: true == !(document.all),
    beforeSend: function() {
        mui.loading.show("");
    },
    success: function(data){
        console.log(":"+JSON.stringify(data));
        if (data.respCode=="0000") {
            var imgUrl = "data:image/png;base64,"+data.content;
            //addWaterMarkArr.push(imgUrl);
            //$("ul").eq(i).find("img").attr("src",imgUrl);
            $(element).siblings("img").attr("src",imgUrl);
        } else {
            mui.toast(data.content);
        }
    },
    error: function(data) {
        mui.toast("Ajax");
    },
    complete:function(){
        mui.loading.hide();
    }
});

}

the problem is: if you take photos with your own camera on your mobile phone, you will report an error by calling the watermark API. The parameter inputBase64 cannot be obtained in the backend log, but there is no problem with using other cameras, such as B612 camera, and there is no problem in selecting image upload on PC. Could you tell me how to solve this? Thank you ~

PS: I have tried not to select the data of base64 in reader.onload to adjust the watermark API. When the images are in the state of preview, click OK to get them, but the preview API still cannot get this data.

Apr.09,2021
Menu