方案梳理
1、前端直接保存，这样直接跨过跟原生app的桥接交互
2、桥接到原生，使用原生能力保存。传输图片数据使用base64数据
前端保存
save() {
html2canvas(this.$refs.saveImage, {
allowTaint: false, // 是否允许跨域图像污染画布
useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
x: 裁剪画布x坐标,
y: 裁剪画布y坐标
}).then(canvas => {
// 点击保存操作
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.setAttribute('download', 图片名 + '.png')
link.style.display = 'none'
document.body.appendChild(link)
link.click()
})
}
浏览器测试，微信，qq等客户端测试，，保存不成功，，
Q:const link = document.createElement('a')
A：手机端不能使用a标签下载图片
桥接客户端保存
客户端保存，就需要前端把图片数据传过来，首先前端需要生成图片数据，然后传输数据
- 前端生成图片
推荐 html2canvas，具体使用搜github就行了
- 传输有几种方式：
1、byte[] 数组
2、字节流
3、base64
html2canvas
注意点：由于是前端页面，图片保存场景有：
- 浏览器上直接保存
- 三方app的保存：如微信，qq等
- 自己app客户端的保存，这个使用桥接
具体使用，遇到的问题等最好还是查看htmlconvas官方issues
byte[]
字节流
base64
这个也是html2canvas生成的，html2canvas.toDataUrl()，返回的就是base64数据，直接桥接传给原生就行了
原生保存处理
原生保存，拿到桥接传过来的数据，工具类具体解析生成图片保存就行了
android
将数据转bitmap保存即可
base64数据
byte[] bitmapArray = Base64.decode(base64, Base64.DEFAULT);
Bitmap bitmap = BitmapFactory.decodeByteArray(bitmapArray, 0, bitmapArray.length);
生成的bitmap为空 或 bad base-64
base64 数据不要带 data:image/jpeg;base64, 数据头，用纯正的base64数据去解析，这个还取决于Base64.decode(base64, Base64.DEFAULT)解码的时候入参的flag
https://blog.csdn.net/yuemitengfeng/article/details/107067128
图片缺失问题
android端保存的图片缺一块
测试android，ios 拿到的base64数据转换图片正常，确定为前端生成图片的问题
页面内二维码是url请求到的，所以，要注意两个问题，一是图片跨域问题，二是htmlconvas生成图片的时候网络图片没有渲染出来
iOS
基本上没啥问题，这也奇怪，前端同样的处理，ios正常，android异常
要注意一下base64转图片的时候也要把data:image/jpeg;base64,去掉
奇怪的是前端同样的处理，ios端正常，android异常，请大佬指教
