通过 ajax 将 base64 图像数据发送到 cfc
Posted
技术标签:
【中文标题】通过 ajax 将 base64 图像数据发送到 cfc【英文标题】:send base64 image data to cfc via ajax 【发布时间】:2016-02-03 03:17:01 【问题描述】:我正在使用 html2canvas.js 从页面上的 div 创建 <canvas>
图像。我想做的是通过 ajax 将渲染的 base64 图像发送到 cfc,这样我就可以将图像实际保存到服务器上的文件夹并将文件路径返回到页面。
我遇到的问题是,当我将 base64 编码的数据发送到 cfc 时,cfc 会解释数据,但数据中有几个“[invalid]”实例。
如果我只是将图像发布到 DOM,图像就会很好地呈现。这是一个要点的链接,其中创建的正常图像与我从传递到 cfc 的参数中转储的图像相比:https://gist.github.com/ronnieduke/d83dfb3e31677191f88e
这是我正在运行的 Ajax(其中 img.src 是上面链接中发布的画布数据的结果)
var image = new Image();
image.id = 'pic';
// This results in the base64 data posted in image-normal.txt in the gist
image.src = canvas.toDataURL("image/png");
var data = new FormData();
data.append('imgData',image.src);
// Genrate images in cfc
$.ajax(
url: 'my.cfc?method=generateImage',
type:'POST',
data:data,
dataType:'JSON',
processData: false,
cache:false,
async:false,
contentType: false,
success:function(data)
console.log(data);
,
error:function(result)
alert(result.responseText);
);
这是我的 cfc:
<cffunction name="generateImage" output="true" access="remote" returnFormat="JSON">
<cfargument name="imgData" required="true" type="string">
<cfset request.acceptExt = 'image/jpg,image/gif,image/png' />
<cfset image = imageReadBase64(arguments.imageData)>
<cfimage
action="write"
destination="image.png"
source="#image#"
overwrite="yes"
>
发生的情况是imageReadBase64()
函数抛出一个错误,它无法读取 PNG 数据。当我转储arguments.imgData
时,我将结果发布在上述要点的 img-cfc.txt 中。这就是包含所有 [INVALID] 实例的内容。
我发现有趣的是,当仔细比较 base64 图像的两个版本时,我注意到在 cfc 版本中有 [INVALID] 的地方,字母“QSS”(在各种情况下)出现在普通版本中。
例如:
正常: ...6s9QSSpN...
从 cfc 参数中转储: ...6s9[INVALID]pN...
正常: ...CwKGgwqsSH7Qyq1g...
从 cfc 参数中转储: ...CwKGgw[INVALID]H7Qyq1g...
我希望特殊字符或其他东西会出现类似的情况,但我不确定“QSS”与任何东西有什么关系。
我在JS端和CFC端都尝试了各种不同的编码/解码,但没有任何效果。任何想法或见解将不胜感激!
提前致谢,
更新: 问题实际上在于“QSS”是 Mura 中 XSS 的一个变量。一旦我在我的 settings.ini 中添加了字段名称作为例外,数据就会正常出现。
【问题讨论】:
您是否在 CFIDE 管理员中启用了“启用全局脚本保护”? 我认为这个网站在 Railo 上,所以我必须检查一下。你认为它应该打开还是关闭? 我在我的 CF 上关闭了它,因为它会检查传递给 CF 的数据并替换它认为危险的东西。见link 这是一个老问题,但我注意到您在 cfargument name ="imgData" 中有错字,但随后将参数称为“arguments.imageData” 【参考方案1】:问题实际上在于“QSS”是 Mura 中 XSS 的一个变量。一旦我在我的 settings.ini 中添加了字段名称作为例外,数据就会正常出现。
来自 J. Dean 的更新 示例 settings.ini.cfm 行:
scriptprotectexceptions=eventid,body
这将告诉 Mura 在进行 XSS 黑名单时忽略这些字段。在我的例子中,eventid 字段有很长的字符串,其中恰好有 QSS,导致我间歇性头痛。
【讨论】:
以上是关于通过 ajax 将 base64 图像数据发送到 cfc的主要内容,如果未能解决你的问题,请参考以下文章
未通过 AJAX POST 请求发送大尺寸图像的 base64(作为 FormData 参数)
通过 JSON 将 base64 的图像发送到 PHP GD 库
如何在 ASP.NET MVC 中将 base64String 转换为 blob 并通过 ajax 发送到控制器?