python django-使用解码的base64写入时图像为空白

Question

My django website aims at allowing users to combine different clothing picture on one single canvas.

However, the saved image is blank.

I have applied one fiddle, please see here .

I've used the methods recommended by some forums.

Here is the views.py

@csrf_protect
@csrf_exempt 
def savewearingimg(request):

    imgEncodeString = request.POST.get('imgBase64')
    if request.method == 'POST' and request.is_ajax():

        singleItemNames = request.POST.getlist('singleItemNames[]') 
        saveWearingName = request.POST.get('saveWearingName') #string
        positionsX = request.POST.getlist('positionsX[]')
        positionsY = request.POST.getlist('positionsY[]')
        userWidths = request.POST.getlist('sizes[]') 

        imgEncodeString = request.POST.get('imgBase64').partition(",")[2]#for header removing
        img64Data = base64.b64decode(imgEncodeString) #other decoding fundctions failed
        BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
        preFileStr = os.path.join(BASE_DIR, "media\\photos\\wearing\\")
        poFileStr=str(request.user)+'_itemName_'+saveWearingName+'.jpg'
        filename = preFileStr +poFileStr

        with open(filename, 'wb') as f:
            f.write(img64Data)

    return render(request,'combinewearing.html')

And here is part of the javascript combinewearing.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];
    }
  }

There is no error message. Only the image is blank.

However, if I follow the same steps and same string as this link suggests, the image would not be blank.

So I suppose that the problem is due to the string's content. My failed string content links to this google doc link (Correct me if I'm wrong, thank you.)

---

I've just found that this rectangle will show up in the image.... So what should I adjust?

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

Answer 1

I have solved this problem by moving THIS PART to the interior of the loadImagesMike() function (inside drawToSave() )

THIS PART---->

        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*/

THIS PART is moved after the for loop, and it is inside the loadImagesMike() function.