使用dom-to-image将html节点转换为图片，并使用UPNG压缩

    domtoimage.toBlob(targetDom, options)
    .then(function (blob) {
        // console.log('dataUrl', dataUrl)
        // var link = document.createElement('a');
        // link.download = 'my-image-name.png';
        // link.href = dataUrl;
        // link.click();
        blob.arrayBuffer().then(
            arrayBuffer=> {
                var decoded = UPNG.decode(arrayBuffer)
                var rgba8 = UPNG.toRGBA8(decoded)
                var compressed = UPNG.encode(
                    rgba8,
                    decoded.width,
                    decoded.height,
                    32767*0.85
                )
                function arrayBufferToBase64(buffer) {
                    var binary = '';
                    var bytes = new Uint8Array(buffer);
                    var len = bytes.byteLength;
                    for (var i = 0; i < len; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    // 对二进制数据进行base64编码
                    return btoa(binary);
                }
                // var blobDest = new Blob([compressed], {type: 'image/png'});
                const base64Str =  'data:image/png;base64,' +arrayBufferToBase64(compressed);
                callback(base64Str);
            }
        );
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
        alert("toPng: "+error);
    });

https://github.com/tsayen/dom-to-image/

  <script src="https://cdn.staticfile.net/pako/1.0.5/pako.min.js"></script>
  <script src="https://cdn.staticfile.net/upng-js/2.1.0/UPNG.min.js"></script>