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，而不要使用数据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');

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

1 个答案: