移动端H5调启相册或拍照 选择图片后进行裁剪

 这段时间做一个公众号项目的开发，其中有一个功能涉及到微信网页调启相机或者拍照 选择图片后进行裁剪 然后转换base64 上传服务器。

思路:

1. 在本页面点击拍照或相册 调启相机或者相册 选择图片后 将图片传到裁剪页面

2. 在裁剪页面显示选择的图片 使用Cropper插件进行裁剪

3. 点击裁剪按钮 将Cropper裁剪的内容 利用canvas 将裁剪的图转换base64

4. 在预览页面 展示裁剪后的图片（base64 可直接在img 的src中使用）

最开始呢 想着微信有现成的js-sdk 可以使用，配合前端的Cropper 插件 应该很容易就实现选择图片裁剪功能，然而。。我真是太单纯了！！！ 其中涉及到的问题有好大一堆。。emmm 想哭，最关键的问题就是跨域，关于跨域大家可以了解一下这篇博客 JavaScript跨域总结与解决办法，写的很详细 ，原因 以及一些解决办法，这是我看过大概比较全面的一篇博客了。 下面罗列一下遇到的问题

1. 微信选择图片然后进行裁剪 使用Cropper 无法显示选择的图片，原因是使用了微信jssdk选择的图片 某种程度上属于跨域。。

2. 裁剪后的图片进行base64转换，然而按照百度的方法 补充添加多种跨域解决办法都无法成功的进行canvas. toDataURL("image/jpg", 1)，因为canvas的toDataURL 即时能够在画布上正常的显示裁剪的图片 也会因为跨域而无法获取到图画数据（Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.），百度后的解释是 画布污染 ，而百度后很多的解决办法是补充img.crossOrigin="anonymous";然并卵，这种方式只适用于子域名可能会有效果，详细的原因可以看这篇博客 canvas生成图片toDataURL报错的原因和解决方法

今天来了继续百度，想着或许可以换一种思路，于是使用了原始的input type=file的选择图片，虽然这种方式效果并不好 但是好歹功能出来了，比起解决跨域问题显得更为便捷（关键是跨域问题太难解决了，没有找到好的解决方案，ε=(´ο｀*)))唉），上代码：

1. 选择页面 点击拍照或相册 都可以选择图片

<div class="bg_head">
    <div class="" >
        <a href="javascript:;" target="_blank"  ><img src="images/ggmuban/paizhao.png" onclick="choose(this)"><span>拍照&