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

目前正在努力做到这一点，我现在认为处理这个服务器端可能更好，但现在开始

我目前正在创建一个小应用程序，它使用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>
    );
};

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'）；
//调整大小
帆布高度=300；
画布宽度=600；
//瓦尔斯
让绘画=虚假；
功能启动位置（e）{
绘画=真实；
抽签（e）；
}
函数finishedPosition（）{
绘画=假；
ctx.beginPath（）；
const newSignature=canvas.toDataURL（）；
setImageURL（新闻签名）；
}
功能图（e）{
如果（！喷漆）返回；
ctx.lineWidth=2；
ctx.lineCap='圆形'；
ctx.lineTo（e.clientX-rect.left，e.clientY-rect.top）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（e.clientX-rect.left，e.clientY-rect.top）；
}
函数clearCanvas（）{
clearRect（0，0，canvas.width，canvas.height）；
setImageURL（“”）；
}
//听众
canvas.addEventListener（'mousedown'，startPosition）；
canvas.addEventListener（'mouseup'，finishedPosition）；
canvas.addEventListener（'mousemove'，draw）；
clear.addEventListener（“单击”，clearCanvas）；
});
函数uploadFile（）{
轴心柱(
'https://content.dropboxapi.com/2/files/upload',
{data:imageURL}，
{
标题：{
授权：'不记名代币'，
“内容类型”：“应用程序/八位字节流”，
'Dropbox API Arg'：'{“路径”：“/签名”，“模式”：“添加”，“自动重命名”：true，“静音”：false}'，
},
},
);
}
返回(
清楚的
签名预览
{imageURL！=''？：未绘制签名。
}
{imageURL！=''？：null}
{imageURL！=''上传：空}
);
};

这可以使用

.toDataURL（）

函数创建base64图像，该函数非常适合向用户显示预览，但是当我将数据发送到Dropbox时，它最终会成为损坏的图像。我还尝试将base64图像转换为

blob

，但我得到了另一个损坏的图像

我不认为可以将这个base64图像转换为Javascript中的原始二进制数据，然后发送上去

非常感谢您的帮助。

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');

函数uploadToDropbox（数据）{
常量配置={
标题：{
授权：“持票人”，
“内容类型”：“应用程序/八位字节流”，
'Dropbox API Arg'：'{“path”：“/test.png”，“mode”：“add”，“autorename”：true，“mute”：false}，
},
};
轴心柱https://content.dropboxapi.com/2/files/upload，数据，配置）；
}
toBlob（uploadToDropbox，'image/png'）；

Blob对我来说很好。您可能误解了axios.post的

API。您发送的不是原始数据，而是一个在代码中具有
data
属性的对象，在这一行：
{data:imageURL}
@PetrSrníček raw data是我所需要的。你说得对。使用
toBlob
方法解决了这个问题。谢谢。我刚刚意识到可用性相当有限。它在Edge和较旧的浏览器中不可用，因此您可能需要浏览数据URL。该线程提供了几种将数据URL转换为BLOB的解决方案：或者为canvas.toBlob使用polyfill（不是我的）：是的，我也注意到了这一点。但是，有一种专门用于Edge/IE的方法称为
msToBlob（）
。不知道这有多骇人。