Мой веб-сайт django нацелен на то, чтобы пользователи могли комбинировать различные изображения одежды на одном холсте.
Однако сохраненное изображение пустое.
Я применил одну скрипку, см. здесь .
Я использовал методы, рекомендуемые некоторыми форумами.
Вот 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];
}
}
Нет сообщения об ошибке.Только изображение пустое.
Однако, если я буду следовать тем же шагам и той же строке, что и эта ссылка , изображение не будет пустым.
Так что я полагаючто проблема связана с содержанием строки.Неудачная строка содержимого ссылается на эту ссылку на Google Doc (поправьте меня, если я ошибаюсь, спасибо.)
Я только что обнаружил, что этот прямоугольник будет отображаться визображение .... Так что я должен настроить?
context.rect(20, 20, 150, 100);
context.stroke();