jquery - how to convert canvas image "data:imagejpeg;base64,.." to normal image file - javascript - Stack Over

admin管理员组

文章数量:1277903

I have

image = canvas.toDataURL("image/png", 1);

but this is returning

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA.......

but I need normal image like src="myimage.png"

how can I get it from canvas? i googled a lot, cannot seem to find what i need...

I have

image = canvas.toDataURL("image/png", 1);

but this is returning

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA.......

but I need normal image like src="myimage.png"

how can I get it from canvas? i googled a lot, cannot seem to find what i need...

• javascript
• jquery
• canvas

Share Improve this question Follow asked Dec 22, 2014 at 12:32 doniyordoniyor 37.9k6161 gold badges181181 silver badges270270 bronze badges 2

• If you want to convert the base64 string to a file, you have to use a server side language, such as php. If you want to search for it, you'll need Base64 or BLOB as keywords. – Stephan Vierkant Commented Dec 22, 2014 at 12:39
• 2 @Cerbrus: I don't think the duplicate you have is quite what the OP was looking for. Here we're posting the base64 code to the server in order to save it to a database. There, it's just figuring out how to download the image client-side. – Cᴏʀʏ Commented Dec 22, 2014 at 13:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The string that you're getting can be used as the source attribute for an image, you just have to create a new Image element to which you can assign it:

var image = new Image();
image.src = canvas.toDataURL("image/png", 1);
// append image to DOM

EDIT: Given the ments, you want to turn this into something that be stored in a database. You should POST the result of toDataURL to your server. Use your server-side technology's IO/image/graphics libraries to decode the base64-encoded part of the data string and write that out to a new file. You can now store that path in your database.

Alternative: just store that whole data string in your database. Then when you render your <img> tag you can simply dump it into the src attribute:

<img src="<< base-64 encoded data string>>" />

本文标签：