window.onload = function(){
//var dataImage = localStordocument.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
var dataURL = canvas.toDataURL("image/png");
imageObj.onload = function(){
context.globalCompositeOperation="destination-over";
context.drawImage(imageObj,250, 50,700,400);// i edit it was context.drawImage(imageObj,50, 50);
context.font = "40pt Comic Sans MS";
context.fillText("draw here",20,80);
context.fill();
context.globalAlpha = 0.5;
};
//function getBase64Image(img) {
//var dataURL = canvas.toDataURL("image/png");
//return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
//}
//here source imge for back ground if you want make it dynamic from upload by user use url of media <canvas style="background: url('{{ user.profile.profile_pic.url }}')" <canvas style="background: url({% static 'images/aes.png'%})"
imageObj.src = dataURL;//"data:image/png;base64," + dataImage;//'/media/imggg/gggg.png';//"{{ img }}"//'/media/imggg/gggg.png';
Customer(models.Model):
namee=models.CharField(max_length=256, blank=True, null=True)
file=models.FileField(upload_to='files/', blank=True, null=True)
customer= models.ForeignKeyCustomer, on_delete = models.PROTECT, null = True)
class Lesionlocation(models.Model):
comment = models.CharField(verbose_name="fgh",max_length=2000)
img = models.ImageField(verbose_name="imaggه",upload_to="img/")
customer=models.ForeignKey(Customer,related_name="custleson",on_delete=models.CASCADE,null=True,blank=True)
def __str__(self):
return self.comment
class LesionlocationView(View):
Welcome @phpdermag !
First, when posting code, templates, error messages, or other preformatted text here, enclose that text between lines of three backtick - ` characters. This means that you’ll have a line of ```, then your code (or templates, etc), then another line of ```. This forces the forum software to keep your code properly formatted. (I’ve taken the liberty of editing your original post for this.)
Second, please identify what the code is, and what is not working. Include any error messages you may be receiving or other diagnostic information. Also please ensure that the code you’re posting is the complete code that is currently being used.
Finally, please include the description of the issue in the body of the post itself. Do not try to describe the problem in the title. The title should be a brief identification of the issue you need help with. The body of your post should contain a complete description of the problem with as many details as you can provide.
Thanks. I. Try drawing on background canvas. This. Background come. From upload in Django model
I successfully only save. Drawing without background
If i set background. From static path it work i need. How pass Django customer model image field in JavaScript
Here models
class Customer(models.Model):
namee=models.CharField(max_length=256, blank=True, null=True)
file=models.FileField(upload_to='files/', blank=True, null=True)
customer= models.ForeignKeyCustomer, on_delete = models.PROTECT, null = True)
class Lesionlocation(models.Model):
comment = models.CharField(verbose_name="fgh",max_length=2000)
img = models.ImageField(verbose_name="imaggه",upload_to="img/")
customer=models.ForeignKey(Customer,related_name="custleson",on_delete=models.CASCADE,null=True,blank=True)
def __str__(self):
return self.comment
Here Django view
return self.comment
class LesionlocationView(View):
def get(self, request,pk, *args, **kwargs):
topics = Lesionlocation.objects.all()
customer_data = Customer.objects.filter(customer_id=pk)
context = { "topics":topics,"apps":apps,'customer_data':customer_data }
return render(request,"da/locator.html",context)
def post(self, request,pk,*args, **kwargs,):
json = { "error":True }
form = LesionlocationForm(request.POST,request.FILES,initial= {'customer': "{{pk}}"})
if form.is_valid():
print("OK")
json["error"] = False
form.save()
messages.success(request, 'Lesions is successfully Saved.')
#user.save()
else:
print("Nooooo")
return JsonResponse(json)
Here locator.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Face Chart</title>
<script src="{% static 'MainCanvas/javascript/drawingface.js' %}"></script>
<script src="{% static 'MainCanvas/javascript/drawfacecolour.js' %}"></script>
<script src="{% static 'MainCanvas/javascript/drawbackgroundface.js' %}"></script>
<script src="{% static 'MainCanvas/javascript/jquery3.js' %}"></script>
</head>
<body >
<main class="container">{% for field in customer_data %}
<form id="formface_area" action="{% url 'adddraw' field.customer_id %}" method="POST">
{% csrf_token %}
<h5>{{field.first_name}}</h5>
<textarea rows="4" cols="16"class="form-control" placeholder="Add Notes" name="comment" ></textarea>
<input name="patient" type="hidden" value="{{ field.pk}}" >
<img src="{{ field.get_img_url }}" alt="">
<div class="my-2">
<!-- here i can change background dynmic but cant save in database -->
<canvas id="canvas" class="canvas" width="1100px" height="600px" style="background: url('{{ field.img.url }}')"></canvas>
<input id="canvas_clear" class="btn btn-danger" type="button" value="clear" style="background: red;">
<input id="submit" class="xyz" type="button" value="save" style="background: green;" >
</form>
<button onclick="window.print()">Print this page</button>
<div class="">
<button onclick="downloadImage()">Download</button><br>
</div>
{% endfor %}
</main>
</body>
<script type="text/javascript">
</script>
</html>
window.onload = function(){
//var dataImage = localStorage.getItem('imgData');
//var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
var dataURL = canvas.toDataURL("image/png");
imageObj.onload = function(){
context.globalCompositeOperation="destination-over";
context.drawImage(imageObj,250, 50,700,400);// i edit it was context.drawImage(imageObj,50, 50);
context.font = "40pt Comic Sans MS";
context.fillText("draw here",20,80);
context.fill();
context.globalAlpha = 0.5;
};
//function getBase64Image(img) {
//var dataURL = canvas.toDataURL("image/png");
//return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
//}
//here source imge for back ground if you want make it dynamic from upload by user use url of media <canvas style="background: url('{{ user.profile.profile_pic.url }}')" <canvas style="background: url({% static 'images/aes.png'%})"
imageObj.src = dataURL;//"data:image/png;base64," + dataImage;/imggg/gggg.png';//"{{ img }}"//'/media/imggg/gggg.png';
Thank you for reposting and trying to fence the code. But you need to use the backtick - ` character, not the apostrophe - ', and you need to use the three backticks - ``` before and after the text being marked off.
The only thing I can directly see as being an issue is this line:
The “initial” should be an instance of the object, not a dict.
That line should be something more like:
customer = Customer.objects.filter(customer_id=pk)
form = LesionlocationForm(request.POST,request.FILES,initial=customer)
Also, I’m assuming that English is not your primary language. What I might suggest is that you write your post in your native language, and then either use translate.google.com to translate it, or post your native language version directly and allow us to translate it. It may make it easier for you to provide a more complete description of what the issue is and what assistance you would like from us.
Ok i do my best for code and what i want is. Get source of background image from customer. Field. Which uploaded by user to make it as background of canvas to draw on it then save both drawing and background
Models
Customer(models.Model):
namee=models.CharField(max_length=256, blank=True, null=True)
file=models.FileField(upload_to='files/', blank=True, null=True)
customer= models.ForeignKeyCustomer, on_delete = models.PROTECT, null = True
class Lesionlocation(models.Model):
comment=models.CharField(verbose_name="fgh",max_length=2000)
Img=models.ImageField(verbose_name="imaggه",upload_to="img/")
customer=models.ForeignKey(Customer,related_name="custleson",on_delete=models.CASCADE,null=True,blank=True)
window.onload = function(){
var context = canvas.getContext("2d");
var imageObj = new Image();
var dataURL = canvas.toDataURL("image/png");
imageObj.onload = function(){
context.globalCompositeOperation="destination-over";
context.drawImage(imageObj,250, 50,700,400);// i edit it was context.drawImage(imageObj,50, 50);
context.font = "40pt Comic Sans MS";
context.fillText("draw here",20,80);
context.fill();
context.globalAlpha = 0.5;
};
//here source imge for back ground if you want make it dynamic from upload by user use url of media background url('{{ field.photo.url }}')"
imageObj.src = {{field.photo}};
};
What is this special character: verbose_name="imaggه"?
Also, I do not really understand what exactly is your problem here because your description in English so bad… Use google translate or something and try to provide a more detailed description of your problem, along with your code. 