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

Question

在我的项目中，我使用 Jquery BlueImp fileUpload 插件将图像上传到我的站点，并且我需要显示图像预览。例如有以下代码：

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

在这种情况下，file.preview 是预览图像，即<canvas width="68" height="80">。所以我需要得到这个画布和第一个 - 将它的尺寸更改为 300x300px 和第二个 - 将它放在我页面上的其他一些 div 上。问题是它只能像示例一样添加到node，所以当我尝试做类似的事情时：

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

我的 div 中没有显示画布。欢迎任何如何解决它的想法。谢谢。

UPD_1如果我像这样更改画布的尺寸：

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

画布的宽度和高度发生了变化，但图像消失了。在这种情况下如何保留图像的任何想法？谢谢。

Answer 1

使用此代码解决的问题：

 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');