jquery Blueimp 文件上传将画布图像预览附加到 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">的预览图像。所以我需要得到这个画布和第一个 - 将其尺寸更改为 300x300 像素，第二个 - 将其放在我页面上的其他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');