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

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

1 个答案: