根據圖像動態設置畫布的寬度和高度

Question

我正在一個項目中，我必須偵聽粘貼事件並將圖像從剪貼板保存到服務器，並顯示在畫布上以進行進一步繪制。

工作原理：獲取剪貼板圖像並保存，在畫布上顯示該圖像作為背景。

不起作用的方法：調整畫布的大小，以便可以顯示整個圖像。 另外，在保存時，我不會將圖形保存在背景圖像上，而只會保存圖形。

我試過了

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

獲取圖像屬性，但僅顯示畫布屬性。

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

還請提出如何保存帶有背景圖像的畫布繪圖。

Answer 1

您需要獲取canvas元素，然后像這樣更改其寬度和高度，

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);}

要保存畫布圖像，您首先需要在其上繪制圖像，然后可以保存它！ 這是保存圖像的鏈接， http：//www.nihilogic.dk/labs/canvas2image/