Breaking News: Grepper is joining You.com. Read the official announcement!

convert data uri to image file javascript

Vast Vendace answered on January 27, 2022 Popularity 9/10 Helpfulness 5/10

answer convert data uri to image file javascript

related image url to file js

convert data uri to image file javascript

Comment

this will convert a dataURI to a Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}
From there, appending the data to a form such that it will be uploaded as a file is easy:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: data-uri image-file javascript

Link to this answer
Share Copy Link

Contributed on Jun 09 2022

Vast Vendace

0 Answers Avg Quality 2/10

Closely Related Answers

image url to file js

Comment

const url = "https://cdn.shopify.com/s/files/1/0234/8017/2591/products/young-man-in-bright-fashion_925x_f7029e2b-80f0-4a40-a87b-834b9a283c39.jpg"
const fileName = url.substring(url.lastIndexOf('/')+1)

fetch(url)
   .then(response => response.blob())
   .then(blob => new File([blob], `${fileName}`, {
   		type: blob.type
	}))
   .then(file => {
   		setFileData(file);
   		setPreview(URL.createObjectURL(file));
	})

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: stackoverflow.com

Tags: file

Link to this answer
Share Copy Link

Contributed on Jan 27 2022

Lucas Juan

0 Answers Avg Quality 2/10

convert data uri to image file javascript

Contents

More Related Answers

convert data uri to image file javascript

Closely Related Answers

image url to file js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.