save div as image when clicked next

Question

how can i save div as image when user clicks next i have the code that allows the user to preview the div as image and then the user has to manually save the image by right clicking and then uploading it as an image. what i really want is for the div to save to a folder in my Db and save the name to my db table.

$(function() {
  var element = $("#firstshirt"); // global variable
  var getCanvas; // global variable
  $("#btn-Preview-Image").on('click', function() {
    html2canvas(element, {
      allowTaint: true,
      logging: true,
      onrendered: function(canvas) {
        $("#previewImage").append(canvas);
        getCanvas = canvas;
      }
    });
  });
});

<input id="btn-Preview-Image" type="button" value="Preview" />

@adeneo, this library seems really useful only to convert to bmp... Otherwise all it does is calling toDataURL, when today it is almost always preferable to use the async toBlob. — Kaiido, Oct 09 '16 at 23:18
@Kaiido - Sure, if it just needs to work in Firefox and the latest version of Chrome, it's almost always preferable to use `toBlob`. Some of us still have to support other browsers as well though. I suggested the library because it seemed to do what the OP wanted, getting an image from a canvas, and even downloading it for you. — adeneo, Oct 09 '16 at 23:30
@adeneo there are [polyfills for toBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill) that will make it work in any browser supporting the Blob constructor (IE10+). The library you linked to is only useful to convert to bmp, check the sources. To save the result, better to use a dedicated lib like fileSaver.js, which needs a Blob as input. canvas2image only does `window.open` so using a library, stuck with an old method like toDataURL to only perform `window.open(canvas.toDataURL())` seems like really cumbersome to me. — Kaiido, Oct 10 '16 at 00:18
Possible duplicate of [PHP+JS: How to do Fileuploads in HTML Form as Content-Type Multipart (via JS)?](http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js) — Kaiido, Oct 10 '16 at 00:23

score 0 · Answer 1 · answered Oct 09 '16 at 23:07

0

one way to do it is using html2canvas

here's the link: http://html2canvas.hertzen.com/examples.html

answered Oct 09 '16 at 23:07

santosh

118
6

i need to save to database on submit – momasboy Oct 09 '16 at 23:15
once you get it as image, encode using base64 and save to database through ajax call. Or you can also use traditional form style where upon click get canvas image as base64 string, set it as hidden/visible text area value and submit form. – santosh Oct 09 '16 at 23:53

save div as image when clicked next

1 Answers1