iPhone 6 Plus 前端上传图片，使用 Canvas 剪裁后
data: 问题。StackOverflow 上的这一个问题几乎是一摸一样的问题：《File Upload shows data with empty strings on Safari and Chrome iOS8.1.2》
TL;DR Recently I encountered similar issue as described in question, found this thread, it may has been a low memory issue with iPhone, and not much work around you can do but resize the big size image with canvas element, I use 1200 pixels as the longest width/height for the image to resize then everything works again.
for any feature reference, more specific hardware and software the problem occurred with my test is iPhone 6 Plus and iOS 8.1.2, and the process I tried to do with images is:
FileReader.onLoad = funcwith
input[type="file"]’s file as base64 string.
- assign base64 as new image()’s src
- inside image.onload = func draw a new canvas’s 2d context with the same with and height as image above.
- check some orientation EXIF info then rotate the canvas.
- finally do other staffs with base64 string of new image which generated form canvas.toDataURL().
- The empty data: occurs in both between step 1 to step 2 and step 5 randomly depends on the size of image got from `input[type=“file”].
In my case, iOS Safari here seems being okay to assign image data to canvas with same width and height, but not okay to toDataURL for the canvas if it has a very big size. But Safari won’t hang anyway, I can re-tap input[type=“file”] to get next file since the empty data: outputted from previous one.