Question

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

但是，保存的图像为空白。

我已经应用了一个小提琴，请参阅here。

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

这是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')

这是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];
    }
  }

没有错误信息。只有图像为空白。

但是，如果我按照与this link建议相同的步骤和相同的字符串进行操作，则图像将不会为空白。

所以我认为问题出在字符串的内容上。我失败了字符串内容链接到this google doc link（如果我输入错了，请纠正我，谢谢。）

我刚刚发现该矩形将显示在图像中。那我该怎么调整？

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

Answer 1

我已通过将此零件移到 loadImagesMike（）函数内部（在 drawToSave（）内部）

解决了这个问题。

此部分---->

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

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

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

1 个答案: