前端保存图片到手机 方案梳理 前端保存 桥接客户端保存 原生保存处理

方案梳理

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异常，请大佬指教