Html Question posted in
Some basic documentation can be found here.

Html – How i save. Canvas in db. With background. Which comes from user uploaded in Django field img

I successfully save if static path
How pass field image of customer to java
There many trial but src for field from model i cant save both i f i add url in style background not saved your text

type h

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;//'/media/imggg/gggg.png';//"{{ img }}"//'/media/imggg/gggg.png';



  //cnanvas.innerHTML = `<img src="${url}" width="50%">`;//`media/${object.img.url}`//("<img src="{{ MEDIA_URL}}{{field.img.url}}">"); //<img src="{{ MEDIA_URL}}{{ City.image.url }}">"url '(${field.img.url})' ";//=("<img src='${{field.img.url}}'>");

  };

ere





    </main>
</body>


<script type="text/javascript">

</script>

</html>

Can pass variable from Django models and view to java
Ok any other help i needs
Edited code how make dynamic uploaded pic background drawing on it then save

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    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)
<canvas id="canvas" class="canvas"  width="1100px" height="600px"    style="background: url('{{ field.img.url }}')"></canvas>
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):


  2. 0

    ”’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}};

    }; ”’

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search