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

Setting canvas Width and Height according to that of image dynamically

本文关键字：高度 图像 动态 设置      更新时间：2023-09-26

我正在做一个项目，我必须倾听粘贴事件，并将图像从剪贴板保存到服务器，并将其显示在画布上以供进一步绘制。

工作原理:获取剪贴板图像并保存，将图像显示在画布上作为背景。

什么是不工作:调整画布的大小，使整个图像可以显示。此外，在保存时，我不会将绘图保存在背景图像上，而只保存绘图。

我试着

 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>

也请建议如何保存画布绘制与背景图像。

你需要获取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/

相关文章：