Vue+cordova camera插件采用dataurl格式导致内存问题的解决方案

一、之前文章中有介绍Vue进行项目开发需要进行图片上传的时候，直接采用input调用相机，在有些安卓设备上会只显示图库，不能调取相机的情况

具体采用input调取相机的代码如下

<input type="file" accept="image/*" capture="camera"><input type="file" accept="video/*" capture="camcorder"><input type="file" accept="audio/*" capture="microphone">

其中，capture表示可以捕获到系统默认的设备，camera－相机，camcorder－摄像机，microphone－录音，accept表示直接打开系统文件目录。

二、因此结合之后采用了cordova进行打包，可以采用cordova-plugin-camrea插件，调取相机进行拍照或者采用图库选取照片。

在之前的文章中，destinationType采用dataurl的形式，返回base64格式编码的字符串，这种之后可以进行转换为blob，在append到formdata上传到阿里云（具体的操作在前文中介绍过），但是这种方式存在着一个弊端，就是采用base64存储的格式的话，会导致内存问题，官方文档里是这样说的

DATAURL can be very memory intensive and cause app crashes or out of memory errors. Use FILEURI or NATIVE_URI if possible

三、因此，本文将要使用fileuri来完成之前的拍照，图片获取及上传的功能

解决方案就是采用canvas,将img绘制到canvas上，再通过canvas转换为file，进行上传。

代码示例如下

var canvas = document.createElement('canvas')var ctx = canvas.getContext('2d')var img = document.getElementById(‘imgId’)img.onload = function () {  canvas.width = img.width  canvas.height = img.height  ctx.drawImage(img, 0, 0, img.width, img.height)  var dataURL = canvas.toDataURL('image/jpeg', 0.5)  var dataArray = dataURL.split(',')  var blob = b64toBlob(dataArray[1], 'image/jpeg')   ....    //此处省略将blob作为file，append到formdata并上传到服务器上的代码        ....  img.onload = null}img.src = imageURI

代码里第一行创建canvas。第二行获取上下文，这个对象提供对其绘图等的方法。

第三行获取要显示的图片的id，值得注意的是img的onload函数要放在img.src赋值之前，此外，在onload函数的执行完毕之后要将其置为null，这样避免重复调用。

还要注意的当canvas的width和height为空的话返回的dataURL是'data:,'形式的。

此处还使用来一个插件来完成base64到blob的转换，但是这个函数的参数是不带base64头的字符串，所以中间进行了格式转化，最后转化的blob即可作为file进行上传。

一些小问题

1、在调用的时候this的绑定问题，由于在img.onload里面用到了this,但是此时的this不是所要用到的作用域，因此，在img.onload外面，采用

var that = this

形式来将this传递给that，在img.onload里，使用that即可访问到原this作用域里的变量和函数。

2、之前采用了canvas.toblob方法来直接将canvas转化为blob，但是存在的问题是有些手机不支持这个方法，也采用了JavaScript-Canvas-to-Blob插件来解决兼容性的问题，但是没有得到很好的解决，最后采用canvas.toDataUrl得到解决.也有相关的帖子讨论toBlob和toDataUrl的利弊，参见[8]

至此，可以采用fileuri完成图片的上传。

参考网址

[1] http://qyf0310.blog.51cto.com/1875017/1876152

[2] http://www.cnblogs.com/xuechenlei/p/5940371.html 

[3] http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova-plugin-camera/index.html

[4] https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

[5] https://segmentfault.com/q/1010000008711634

[6] https://github.com/blueimp/JavaScript-Canvas-to-Blob

[7] http://blog.csdn.net/cool_coder/article/details/43193851

[8] https://www.zhihu.com/question/59267048/answer/164201665