jQuery blueimp fileupload将画布图像预览附加到div

Question

In my project I am using Jquery BlueImp fileUpload pluging for uploading images to my site and I need to display image preview. In example there is the following code:

node = $(data.context.children()[index]);
if (file.preview) {     
   node
      .prepend('<br>')
      .prepend(file.preview);    
   }

In this case file.preview is a preview image which is <canvas width="68" height="80"> . So I need to get this canvas and 1st - change its dimentions for say 300x300px and 2nd - put it to some other div on my page. The problem is that it can be only prepended to node as in example, so when I try to do something like:

 $('#uploaded_photo_p').prepend(file.preview);

no canvas is showed in my div. Any ideas how to fix it would be welcome. Thank you.

UPD_1 If I change the dimentions of canvas like this:

$(file.preview)
      .attr("width", 136)
      .attr("height", 160);

the canvas width and height are changed, but the image is gone. Any ideas how to keep an image in this case? Thank you.

Answer 1

issue solved with this code:

 var canvas = data.files[0].preview;
 var dataURL = canvas.toDataURL();
 $("#uploaded_photo").css("background-image", 'url(' + dataURL +')')
                     .css('background-repeat', 'no-repeat')
                     .css('background-position', 'center center');