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/

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

1 个答案: