x5内核 ajax base64,无法通过异步ajax调用返回base64图像(Failing to render base64 image return by async ajax call)...

博客讨论了在不同浏览器中通过异步Ajax调用来加载Base64编码图像的问题。当请求设置为同步时,图像在IE、Chrome和Firefox中正常显示,但在异步情况下,图像在某些浏览器中呈现不稳定,尤其是移动设备上。问题最终归因于内容类型前缀的缺失,解决方案是在设置`self.Image`时添加正确的Base64内容类型。
摘要由CSDN通过智能技术生成

无法通过异步ajax调用返回base64图像(Failing to render base64 image return by async ajax call)

我尝试进行多个异步ajax调用,其中一个是从服务器请求base 64映像。 如果我将base64图像的ajax请求设置为同步,它适用于IE,Chrome和Firefox。 但是,对于异步的情况,图像每次都在IE中呈现,但偶尔也不会在Chrome和Firefox中呈现。 有时它正在被渲染,有时则不是。 最重要的是,移动浏览器不会渲染图像。

代码很简单,但我不知道它有什么问题。

function TestViewModel() {

var self = this;

self.Image = ko.observable();

self.GetProfileData = function () {

$.ajax({

async: true,

type: 'GET',

url: ..,

success: {

// return profile data

}

});

}

self.GetProfileImage = function() {

$.ajax({

async: true,

type: 'GET',

url: ..,

success(data): {

self.Image(data.Base64Image);

}

});

}

self.GetProfileData();

self.GetProfileImage();

}

ko.applyBindings(new TestViewModel());

I trying to make multiple async ajax call and one of it is to request base 64 image from server. It works for IE, Chrome and Firefox if i set the ajax request for base64 image to synchronous. However, for the case of asynchronous, the image is being rendered everytime in IE but not being rendered in Chrome and Firefox once in a while. Sometimes it is being rendered and sometimes it is not. Most importantly, mobile browser do not render the image at ALL.

The code is pretty simple but I have no idea what's wrong with it.

function TestViewModel() {

var self = this;

self.Image = ko.observable();

self.GetProfileData = function () {

$.ajax({

async: true,

type: 'GET',

url: ..,

success: {

// return profile data

}

});

}

self.GetProfileImage = function() {

$.ajax({

async: true,

type: 'GET',

url: ..,

success(data): {

self.Image(data.Base64Image);

}

});

}

self.GetProfileData();

self.GetProfileImage();

}

ko.applyBindings(new TestViewModel());

原文:https://stackoverflow.com/questions/33151450

更新时间:2019-11-01 00:13

最满意答案

我猜你应该使用内容类型前缀:

self.Image("data:image/x;base64," + data.Base64Image);

I guess you should use content type prefix:

self.Image("data:image/x;base64," + data.Base64Image);

相关问答

使用toBlob返回blob -or二进制对象,而不是toDataURL。 您可以将结果直接发送到服务器。 虽然呼叫是异步的 myCanvas.toBlob(function(myBlob) {

// send blob to server here!!

}, "image/jpeg", 0.5);

注意:较旧的MS不支持它,但请查看顶部的链接以获取垫片。 那里有更好的垫片。 Use toBlob which returns a blob -or binary- object, instea

...

我猜你应该使用内容类型前缀: self.Image("data:image/x;base64," + data.Base64Image);

I guess you should use content type prefix: self.Image("data:image/x;base64," + data.Base64Image);

我了解到,Zendesk应用程序框架对请求使用jQuery AJAX包装,并且阵列缓冲区类型不受支持,因此文件已损坏。 应用程序框架团队解决了这个问题。 I learned that the Zendesk app framework uses a jQuery AJAX wrapper for requests and the arraybuffer type is unsupported, so the file was getting corrupted. The app framework

...

是的,这是一个愚蠢的Apache设置错误。 我以前修改过max_post_size并没有得到任何结果。 但是这次我修改了max request body参数,我终于可以将数据发送到服务器了。 Yep, it was a stupid Apache settings error. I have previously modified max_post_size and got nothing. However this time I modified the max request body par

...

使用ajax帖子而不是提交,如果它在移动浏览器中有长度限制,则不需要hidden_field。 如果您在服务器端不需要Base64编码开销也不是必需的。 .post(

"/ajaxpostURL.php",

{

new_image: processed, // or new_image: src,

other_form_param_or_data: 'some_data'

}

);

With ajax post instead of submit you don't

...

在评论中回答,但无论如何都将此作为答案发布: 收到的$ request值未按数字索引,因此您需要使用其名称访问它。 而不是$request->all()[0] ,你需要使用$request->theData ,或者在表单中命名的值。 Answered in the comments, but posting this as an answer anyway: The $request value that is received isn't numerically indexed, so you

...

你必须增加你的php.ini的限制: upload_max_filesize post_max_size 或者重新创建ajax函数来为每个图像进行1次调用 你可以用这样的东西重新创建ajax函数: var formData

= new FormData( $(this)[0] );

formData.append('ab-user-image', JSON.stringify(thumbnailArray));

$(formData).each().ajax({

...

尝试更换 document.getElementById('img').appendChild(xmlhttp.responseText);

同 document.getElementById('img').innerHTML = xmlhttp.responseText;

或者,如果您需要继续使用.appendChild(),请尝试替换 document.getElementById('img').appendChild(xmlhttp.responseText);

同 var o = d

...

你必须设置654 ,在650公共用户无法访问目录和内部文件,如果你请求PHP必须设置655 ,允许用户执行PHP文件 you must Set 654, in 650 public user can not access the directory and inner File if You Request For PHP Must Set 655 that allow user to Execute PHP file

我设法将pdf文件(乱码)转换为base64字符串,正确的定义应该是将二进制文件转换为base64。 以下是答案,感谢@DaTebe和以下参考答案: 使用Javascript检索二进制文件内容,base64对其进行编码并使用Python对其进行反向解码 答案, 首先,从引用的答案中编写两种转换方法 function base64Encode(str) {

var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz012

...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值