JSON并不完全是JavaScript的子集,它们对部分字符处理不同。

业务方提出的BUG,某位用户总是无法正常使用系统,初步诊断为接口JSON解析失败。

进一步检查发现,该接口返回数据:
正常情况下,“Response Headers”中“Content-Type”为“application/json; charset=utf-8
”,Chrome开发工具中“Response Body Preview”为JSON对象。
异常情况下,“Response Headers”中“Content-Type”为“application/json; charset=utf-8
”,Chrome开发工具中“Response Body Preview”为JSON字符串。

而“Response Body”初看起来,一切正常。仔细一看才发现,原来其中混入了一个控制字符“ESC”(Unicode编码为\u001b),现代浏览器(IE9-11、Chrome、Firefox)不可正常识别数据格式(IE8反而可以识别),造成JSON解析失败,进而触发Ajax的error回调。如图所示:
JSON特殊字符

查询相关资料,发现之前对于JSON的理解有些狭隘,原来JSON并不完全是JavaScript的子集。
mozilla说明:
JavaScript 与 JSON 的区别

现代浏览器测试:

由此可知,需要对用户输入进行过滤。对于部分字符进行预处理,避免浏览器无法解析接口返回数据。
写了一个处理函数:

参考资料:
介绍 JSON
http://www.json.org/json-zh.html
JSON
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON
JSON: The JavaScript subset that isn’t
http://www.timelessrepo.com/json-isnt-a-javascript-subset

IE8与近代(IE9至IE11)及现代(Chrome和Firefox)浏览器,对于\r和\n的处理方式不同。

需求:对于textarea中输入的换行,要在页面中表现出来。
方案:输入内容在展示时,通过将\r和\n替换为标签,代码如下:

以上代码,在IE9-11、Chrome、Firefox中运行良好,但在IE8下无效。
调试后发现,原来IE8中通过innerHTML拿出的字符串,被移除了\r和\n。

IE8
IE9
chrome
firefox

参考资料:
Document.createElement()
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement
element.innerHTML
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
Node.nodeValue
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
Node.textContent
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent

使用Java对图片进行裁剪,裁减后出现偏色现象。

关键词:
Java 图片 照片 裁剪 剪切 缩放 偏色 失真 变形

先上结论:
对原始图片进行裁剪操作,一切正常。对上传后的文件进行裁剪,出现偏色现象。调节各种裁剪参数,更换多种裁剪方式,均不奏效。
最后发现,原始图片和上传后的图片,虽然直接打开后视觉效果表现一致,但文件大小变小了。进一步检查发现,图片中的大部分EXIF信息丢失,只剩下最基本的信息。
在上传图片的过程中,使用了集团封装的类库,对文件内容进行安全过滤。我们并不清楚过滤的具体细节,结果由于过度信任而浪费了大量时间。
猜测java的图形处理类库,需要依赖较多的EXIF信息,对此种文件兼容性较差。由于时间原因,未深入探寻。如以后找到更多信息,再回来进行补充。

再来吐槽:
百度和google了很久,相关信息很少,stackoverflow中也没找到相关问题。只找到很久之前两个没有答案的问题,也不知道这两位题主最后有没有找到解决方案。
http://www.oschina.net/question/190011_85557
http://zhidao.baidu.com/link?url=-1-_iQBsBuLzeuadYWGNXjVuQUIXqc4P07veaTKoJHDytJmmbhqE5a6pb108Bn2HBY6F7IjOjJ-5JLQgsiaHsshA4oNNKJZbq4M5w1hRH-i

最后看图:
原始图片
原图
原始图片EXIF信息
原图_EXIF
安全过滤后图片
新图
安全过滤后图片的EXIF信息
新图_EXIF
裁剪后偏色图片
小图
裁剪后偏色图片的EXIF信息
小图_EXIF