Javascript python django-使用解码的base64编写时，图像为空

我的django网站旨在允许用户在一张画布上组合不同的服装图片

但是，保存的图像为空白

我用了一把小提琴，请看

我使用了一些论坛推荐的方法

这是views.py

@csrf\u保护
@豁免
def savewearingimg（请求）：
imgEncodeString=request.POST.get（'imgBase64'）
如果request.method==“POST”和request.is_ajax（）：
singleItemNames=request.POST.getlist（'singleItemNames[]）
saveWearingName=request.POST.get（'saveWearingName'）#字符串
positionsX=request.POST.getlist（'positionsX[]）
positionsY=request.POST.getlist（'positionsY[]）
userWidths=request.POST.getlist（'size[]）
imgEncodeString=request.POST.get（'imgBase64'）.partition（“，”[2]”用于删除标头
img64Data=base64.b64解码（imgEncodeString）#其他解码失败
BASE_DIR=os.path.dirname（os.path.dirname（os.path.abspath（u文件_u）））
preflestr=os.path.join（基本目录，“媒体\\照片\\\”）
poFileStr=str（request.user）+''u itemName'+saveWearingName+'.jpg'
filename=preFileStr+poFileStr
将open（filename，'wb'）作为f：
f、 写入（img64Data）
返回呈现（请求'CombineWaring.html'）

下面是javascript CombineWaring.js的一部分

$(function() {
   canvas = document.getElementById('save-canvas');
    context = canvas.getContext('2d');
});

 $('#saveWearingBtn').click(function(){

        drawToSave(alreadyPutImg,originalWidths);
     });
 function drawToSave(alreadyPutImg,originalWidths){

        loadImagesMike(sources, function(images_) { //the original author is Mike
            for(var i=0; i<ImgPutArr.length; i++ ){
                var img_iter = ImgPutArr[i];
         context.drawImage(images_[i],img_iter.x,img_iter.y,img_iter.w,img_iter.h);
                console.log('images_[i]: '+images_[i] );//[object HTMLImageElement]
                i++;
            }

        });


        var myDataURL = canvas.toDataURL(); 
        $.ajax({
          type: "POST",
          url: "/savewearingimg/",
          data: {
             'csrfmiddlewaretoken': "{{ csrf_token }}",
             'imgBase64': myDataURL,
             'singleItemNames': alreadyPutName,//array storing what users have added to the canvas
             'saveWearingName':$('#saveWearingName').val(), //end-users can customized his/her desired wearing title
             'positionsX':positionsX, //position array storing every clothing pictures
             'positionsY':positionsY,
             'sizes':sizes,
          },

        }).done(function(o) {
            alert('saved');
          console.log('saved');

        });/*end ajax*/
     } 
/*sources is an array storing all the user-selected pictures absolute path*/
function loadImagesMike(sources, callback) {
    var images = [];
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

---

我已通过将此部分移动到loadImagesMike（）函数的内部（内部drawToSave（））解决了此问题

这部分-->

---

此部件在for循环之后移动，它位于loadImagesMike（）函数中。

您好！听起来是个有趣的项目！这确实很奇怪，从代码角度讲，应该是可行的。自从你用BASE64代码添加了一个google文档链接之后，我想到的是BASE64代码不完整或者由于某种原因无效。如果您查看共享链接的base64，并将其复制粘贴到此网站，您将收到PNG格式的图像。但是如果我使用你的BASE64字符串，什么都不会显示。你能分享你的图像吗？我将尝试检查base64编码是否出错或类似问题。谢谢。我从网上随机选择了不同的图片，但没有任何帮助。最初，我选择笔记本电脑文件夹下的图像。那么这解决了问题还是您仍然有问题？：）嗨，忘了告诉你，如果我在我提到的谷歌文档中粘贴字符串，你上面列出的工具会返回一个空白图像~~

context.rect(20, 20, 150, 100);
context.stroke();

        var myDataURL = canvas.toDataURL(); 
    $.ajax({
      type: "POST",
      url: "/savewearingimg/",
      data: {
         'csrfmiddlewaretoken': "{{ csrf_token }}",
         'imgBase64': myDataURL,
         'singleItemNames': alreadyPutName,//array storing what users have added to the canvas
         'saveWearingName':$('#saveWearingName').val(), //end-users can customized his/her desired wearing title
         'positionsX':positionsX, //position array storing every clothing pictures
         'positionsY':positionsY,
         'sizes':sizes,
      },

    }).done(function(o) {
        alert('saved');
      console.log('saved');

    });/*end ajax*/