httml 2 canvas.jsの使用を記録してください.

httml 2 canvas.jsの使用を記録してください.
ここで完成した機能は:ページ展示)で、jsは部分domを切り取り、画像を生成して、サーバーにアップロードして保存します.
参考記事:https://blog.csdn.net/candy_ホーム/アート/detail/78424642公式サイト:https://html2canvas.hertzen.com/ github:https://github.com/niklasvh/html2canvas 公式サイトまたはhttp://www.bootcdn.cn/jsファイルをダウンロード
ネットのコードを少し修正して、公式サイトの文書を参考にしてもらいます.

function capture() {
    var html = document.getElementById('contract')
    var b64
    html2canvas(html, {
        backgroundColor: '#FFFFFE',
        allowTaint: true
    }).then(function(canvas) {
        try {
            b64 = canvas.toDataURL("image/png")
            var fd = new FormData();
            fd.append("name", "file");
            var file = fileHandleUtil.dataURLtoFile(b64, 'contract.png')
            fd.append("file", file)
            var xhr = new XMLHttpRequest()
            xhr.addEventListener("load", function(e) {
                var result = JSON.parse(e.target.response)
                if(result.succ) {
                    //     
                } else {
                    mui.toast(result.msg)
                }
            }, false)
            xhr.open("POST", SERVER_URL + "/upload")
            xhr.send(fd)
        } catch(err) {
            console.log(err)
        }
    }).catch(function onRejected(error) {});
}

このうちfileHandleUtil.dataURLtoFileは以下のコードを参照して具体的に実現されます.

function dataURLtoFile (dataurl, filename) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while(n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {
        type: mime
    });
}

4つのピット1に遭遇しました.ファイルをアップロードする時は、blobオブジェクトではなくbase 64のデータをfileオブジェクトに変換したほうがいいです.そうしないと、バックエンドが間違っています.2.非透明の背景色を設定しています.私はここで同時にdomノードの背景色、httml 2 canvasメソッドパラメータの背景色を設定しています.いずれも{FFFEです.設定しない時に展示画像で見たのは黒です.3.スクリーンショットが不完全で、可視領域だけを切り取ることができます.解決方法は参照してください.https://blog.csdn.net/jackqth/article/details/53588897. 4.IPhoneのdataURLtoFile関数は空白のオブジェクトに戻ります.本当にIOSを突っ込む力がなくなりました.私の解決方法は直接base 64文字列をパラメータとしてサーバに送ってから処理します.

byte[] bytes = Base64.decodeBase64(b64Str.replaceAll("data:([\\s\\S]+);base64,", "").replaceAll("==", ""));
//   bytes    ...