笔记：iPhone 6 Plus with iOS 8.1.2 canvas 图片剪裁问题

问题

iPhone 6 Plus 前端上传图片，使用 Canvas 剪裁后 toDataURL() 转换出空 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:

1. using FileReader.onLoad = func with FileReader.readAsDataURL() to read input[type="file"]’s file as base64 string.
2. assign base64 as new image()’s src
3. inside image.onload = func draw a new canvas’s 2d context with the same with and height as image above.
4. check some orientation EXIF info then rotate the canvas.
5. finally do other staffs with base64 string of new image which generated form canvas.toDataURL().
6. 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.