根据图像动态设置画布的宽度和高度

Question

I am working on a project where I have to listen for paste event and save the image from clipboard to server and display it on canvas for further drawing.

What is working: get clipboard image and save it, displaying the image on canvas as background.

What is not working: resizing canvas so that whole image can be displayed. Also, while saving, I does not save the drawing on background image rather it only saves the drawing.

I tried

 var newImg = document.getElementById('justimg');
    newImg.src = data.showthis;
    newImg.onload= function(){
        curHeight = newImg.height;
        curWidth = newImg.width;
        alert(curWidth);
        alert(curHeight);}

to get image attribute but its showing canvas attributes only.

 <img id="justimg">
<canvas id="bearimage" ></canvas>

Also please suggest how to save canvas drawing with background image.

Answer 1

You need to get the canvas element and then change its width and height like this,

var newImg = document.getElementById('justimg');
    newImg.src = data.showthis;
    newImg.onload= function(){
        var canvas = document.getElementById('bearimage');
        canvas.height = newImg.height ;
        canvas.width = newImg.width ;
        alert(canvas.height);
        alert(canvas.width);}

To save canvas image you first need to draw the image on it and then you can save it! Here is a link to save image, http://www.nihilogic.dk/labs/canvas2image/