How to save an HTML5 Canvas as an image on a server

Question

I m working on a generative art project where I would like to allow users to save the resulting images from an algorithm  The general idea is    Create an image on an HTML5 Canvas using a generative algorithm When the image is completed  allow users to save the canvas as an image file to the server Allow the user to either download the image or add it to a gallery of pieces of produced using the algorithm    However  I   m stuck on the second step  After some help from Google  I found this blog post  which seemed to be exactly what I wanted   Which led to the JavaScript code   function saveImage       var canvasData   canvas toDataURL  image png      var ajax   new XMLHttpRequest       ajax open  POST    testSave php   false     ajax onreadystatechange   function         console log ajax responseText         ajax setRequestHeader  Content-Type    application upload      ajax send  imgData     canvasData       and corresponding PHP  testSave php     lt  php if  isset  GLOBALS  HTTP RAW POST DATA          imageData    GLOBALS  HTTP RAW POST DATA       filteredData   substr  imageData  strpos  imageData         1      unencodedData   base64 decode  filteredData      fp   fopen   path to file png    wb       fwrite  fp   unencodedData     fclose  fp       gt    But this doesn   t seem to do anything at all   More Googling turns up this blog post which is based off of the previous tutorial  Not very different  but perhaps worth a try    data     POST  imgData     file     path to file png    uri   substr  data strpos  data         1    file put contents  file  base64 decode  uri    echo  file    This one creates a file  yay  but it   s corrupted and doesn   t seem to contain anything  It also appears to be empty  file size of 0    Is there anything really obvious that I   m doing wrong  The path where I   m storing my file is writable  so that isn   t an issue  but nothing seems to be happening and I   m not really sure how to debug this   Edit  Following Salvidor Dali   s link I changed the AJAX request to be   function saveImage       var canvasData   canvas toDataURL  image png      var xmlHttpReq   false     if  window XMLHttpRequest        ajax   new XMLHttpRequest          else if  window ActiveXObject        ajax   new ActiveXObject  Microsoft XMLHTTP           ajax open  POST    testSave php   false     ajax setRequestHeader  Content-Type    application x-www-form-urlencoded      ajax onreadystatechange   function         console log ajax responseText         ajax send  imgData     canvasData       And now the image file is created and isn   t empty  It seems as if the content type matters and that changing it to x-www-form-urlencoded allowed the image data to be sent   The console returns the  rather large  string of base64 code and the datafile is  140 kB  However  I still can   t open it and it seems to not be formatted as an image

User · Answer

Send canvas image to PHP   var photo   canvas toDataURL  image jpeg                      ajax     method   POST     url   photo upload php     data        photo  photo           Here s PHP script  photo upload php   lt  php       data     POST  photo        list  type   data    explode       data       list    data         explode       data        data   base64 decode  data        mkdir   SERVER  DOCUMENT ROOT       photos         file put contents   SERVER  DOCUMENT ROOT       photos   time     png    data       die    gt

User · Answer

I ve worked on something similar  Had to convert canvas Base64-encoded image to Uint8Array Blob   function b64ToUint8Array b64Image       var img   atob b64Image split      1       var img buffer          var i   0     while  i  lt  img length          img buffer push img charCodeAt i          i            return new Uint8Array img buffer      var b64Image   canvas toDataURL  image jpeg    var u8Image    b64ToUint8Array b64Image    var formData   new FormData    formData append  image   new Blob   u8Image     type   image jpg       var xhr   new XMLHttpRequest    xhr open  POST     api upload   true   xhr send formData

User · Answer

I just made an imageCrop and Upload feature with https   www npmjs com package react-image-crop to get the ImagePreview   the cropped image rendering in a canvas  https   developer mozilla org en-US docs Web API HTMLCanvasElement toBlob canvas toBlob function blob         image jpeg   0 95    I prefer sending data in blob with content type image jpeg rather than toDataURL   a huge base64 string  My implementation for uploading to Azure Blob using SAS URL axios post azure sas url  image in blob       headers           x-ms-blob-type    BlockBlob          Content-Type    image jpeg

User · Answer

I think you should tranfer image in base64 to image with blob  because when you use base64 image  it take a lot of log lines or a lot of line will send to server  With blob  it only the file  You can use this code bellow   dataURLtoBlob    dataURL  - gt      Decode the dataURL   binary   atob dataURL split      1       Create 8-bit unsigned array   array        i   0   while i  lt  binary length     array push binary charCodeAt i      i       Return our Blob object   new Blob   new Uint8Array array     type   image png     And canvas code here   canvas   document getElementById  canvas   file   dataURLtoBlob canvas toDataURL      After that you can use ajax with Form     fd   new FormData     Append our Canvas image file to the form data   fd append  image   file     ajax     type   POST      url    url-to-save      data  fd     processData  false     contentType  false     This code using CoffeeScript syntax   if you want to use javascript  please paste the code to http   js2 coffee

User · Answer

If you want to save data that is derived from a Javascript canvas toDataURL   function  you have to convert blanks into plusses  If you do not do that  the decoded data is corrupted    lt  php    encodedData   str replace          encodedData      decocedData   base64 decode  encodedData     gt    http   php net manual ro function base64-decode php

User · Answer

I played with this two weeks ago  it s very simple  The only problem is that all the tutorials just talk about saving the image locally  This is how I did it   1  I set up a form so I can use a POST method   2  When the user is done drawing  he can click the  Save  button   3  When the button is clicked I take the image data and put it into a hidden field  After that I submit the form   document getElementById  my hidden   value   canvas toDataURL  image png    document forms  form1   submit      4  When the form is submited I have this small php script    lt  php   upload dir   somehow get upload dir       implement this function yourself  img     POST  my hidden     img   str replace  data image png base64         img    img   str replace            img    data   base64 decode  img    file    upload dir  image name png    success   file put contents  file   data   header  Location      POST  return url       gt

User · Answer

In addition to Salvador Dali s answer    on the server side don t forget that the data comes in base64 string format  It s important because in some programming languages you need to explisitely say that this string should be regarded as bytes not simple Unicode string    Otherwise decoding won t work  the image will be saved but it will be an unreadable file

User · Answer

Here is an example of how to achieve what you need   Draw something  taken from canvas tutorial    x000D   x000D   lt canvas id  myCanvas  width  578  height  200  gt  lt  canvas gt   lt script gt    var canvas   document getElementById  myCanvas      var context   canvas getContext  2d          begin custom shape   context beginPath      context moveTo 170  80     context bezierCurveTo 130  100  130  150  230  150     context bezierCurveTo 250  180  320  180  340  150     context bezierCurveTo 420  150  420  120  390  100     context bezierCurveTo 430  40  370  30  340  50     context bezierCurveTo 320  5  250  20  250  50     context bezierCurveTo 200  5  150  20  170  80         complete custom shape   context closePath      context lineWidth   5    context fillStyle     8ED6FF     context fill      context strokeStyle    blue     context stroke     lt  script gt  x000D   x000D   x000D    Convert canvas image to URL format  base64  var dataURL   canvas toDataURL     Send it to your server via Ajax    x000D   x000D        ajax         type   POST         url   script php         data              imgBase64  dataURL                done function o          console log  saved              If you want the file to be visible in the browser           - please modify the callback in javascript  All you          need is to return the url to the file  you just saved           and than put the image in your browser          x000D   x000D   x000D    Save base64 on your server as an image  here is how to do this in PHP  the same ideas is in every language  Server side in PHP can be found here

[javascript] How to save an HTML5 Canvas as an image on a server?

Examples related to javascript

Examples related to php

Examples related to ajax

Examples related to html5-canvas