将使用画布创建的 base64 图像转换为二进制数据并发布到 Dropbox API

Question

目前正在努力做到这一点，我现在认为处理这个服务器端可能会更好，但是就这样吧。

我目前正在创建一个小应用程序，它使用 HTML 画布获取用户绘制的签名，并使用他们的 API 将其上传到 Dropbox：

const Canvas = () => {
    const [imageURL, setImageURL] = useState('');

    window.addEventListener('load', () => {
        const canvas = document.querySelector('#canvas');
        const ctx = canvas.getContext('2d');
        const rect = canvas.getBoundingClientRect();
        const clear = document.getElementById('clear');

        // Resizing
        canvas.height = 300;
        canvas.width = 600;

        // Vars
        let painting = false;

        function startPosition(e) {
            painting = true;
            draw(e);
        }

        function finishedPosition() {
            painting = false;
            ctx.beginPath();
            const newSignature = canvas.toDataURL();
            setImageURL(newSignature);
        }

        function draw(e) {
            if (!painting) return;
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';

            ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            setImageURL('');
        }

        // Listeners
        canvas.addEventListener('mousedown', startPosition);
        canvas.addEventListener('mouseup', finishedPosition);
        canvas.addEventListener('mousemove', draw);
        clear.addEventListener('click', clearCanvas);
    });

    function uploadFile() {
        axios.post(
            'https://content.dropboxapi.com/2/files/upload',
            { data: imageURL },
            {
                headers: {
                    Authorization: 'Bearer TOKEN_HERE',
                    'Content-Type': 'application/octet-stream',
                    'Dropbox-API-Arg': '{"path": "/signature","mode": "add","autorename": true,"mute": false}',
                },
            },
        );
    }

    return (
        <Fragment>
            <div className={styles.wrapper}>
                <canvas id="canvas" className={styles.nwicanvas} />
                <Button buttonId="clear">Clear</Button>
                <h3 className={styles.title}>Signature preview</h3>
                {imageURL !== '' ? <img src={imageURL} alt="signature" /> : <p>No signature drawn.</p>}
                {imageURL !== '' ? <a download="signature.png" href={imageURL}>Download</a> : null}
                {imageURL !== '' ? <Button onClick={uploadFile}>Upload</Button> : null}
            </div>
        </Fragment>
    );
};

这可以使用 .toDataURL() 函数创建 base64 图像，该函数非常适合向用户显示预览，但是当我将数据发送到 Dropbox 时，它最终成为损坏的图像。我也尝试将 base64 图像转换为 blob，但我得到另一个损坏的图像。

我认为不可能将此 base64 图像转换为 Javascript 中的原始二进制数据并将其发送出去？

非常感谢任何帮助。

Answer 1

BLOB（二进制大对象）就是这样 - 二进制数据。我建议坚持使用它而不是数据 URL。它对我来说就像一个魅力：

function uploadToDropbox(data) {
  const config = {
    headers: {
      Authorization: 'Bearer <token here>',
      'Content-Type': 'application/octet-stream',
      'Dropbox-API-Arg': '{"path": "/test.png","mode": "add","autorename": true,"mute": false}',
    },
  };

  axios.post('https://content.dropboxapi.com/2/files/upload', data, config);
}

canvas.toBlob(uploadToDropbox, 'image/png');