Getting Binary (Base64) Data from Html5 Canvas (Readasbinarystring)

Convert base64 image created with canvas to binary data and post to Dropbox API

BLOB (Binary Large Object) is just that - binary data. I would suggest sticking to that instead of data URLs. It works like a charm for me:

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

Convert binary image data received from the server to <img> without base64

Try this:

const load = async () => {
  loaded.value = false

  try {
    const res = await axios.get(src.value, {
      responseType: 'blob', 
      headers: { 'X-Chat-Session': sessid }
    })

    console.log(res.data)
    const url = URL.createObjectURL(res.data)
    <image element>.src = url;

    loaded.value = true
    emit('loaded')
  } catch (e) {
    emit('loadingError', e)
  }
}

Displaying images in html5 canvas from binary data

swap drawImage with putImageData

createImageData() returns an ImageData object.

http://tinker.io/e3ec8

you also have a mistake here:
for (var i=0; i<image.length; i++) {

you want the image.data.length not the image length

Can I convert an image FROM base64 to binary client side?

Daniel C's comment led me to the solution (here at Convert Data URI to File then append to FormData).

The one extra thing I needed was URL.createObjectURL(blob), which gave me a string handle to pass the file around.

---

Related Topics