[移动开发]前端WebView传递图像到原生

背景：

前端页面需要将页面展示内容进行截屏，然后调用原生的分享功能进行分享。

解决方案

前端调用相关api对页面内容进行绘制截取，将截图的内容进行base64编码后，再通javascripteinterface传递给客户端，客户端将webview传递过来的字符串解码成Bitmap

疑难点

1、base64字符串从前端传过来时，带了base64的标识符，一般为"base64/png",注意客户端在解码时，一定要把这段标识字符串删除掉，然后再解码，否则会解码失败；
2、iOS解码时，除了第一个注意点外，还要要注意字符串长度一定要为4的倍数，否则也将解码失败。
代码如下

extension String {
    var fixedBase64Format: Self {
        let offset = count % 4
        guard offset != 0 else { return self }
        return padding(toLength: count + 4 - offset, withPad: "=", startingAt: 0)
    }
    
    func base64StrToImage() -> UIImage? {
        var finalStr = self
        let commaIndex = self.range(of: ",")

        if commaIndex != nil {
            finalStr = String(self[commaIndex!.upperBound...])
        }
        finalStr = finalStr.fixedBase64Format
        if let imageData = Data(base64Encoded: finalStr, options: .ignoreUnknownCharacters) {
            let image = UIImage(data: imageData)
            return image
        }
        return nil
    }
}