Question

如何修改图像大小？：

＆＃13;

var image = new Image();

image.src = 'http://www.ziiweb.com/images/logo.png';

image.width = 200; //this is not modifying the width of the image

$('canvas').css({
    background: 'url(' + image.src + ')'
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

＆＃13;

Answer 1

您正在将图像作为背景插入，因此请使用背景大小。

var image = new Image();
image.src = 'http://www.ziiweb.com/images/logo.png';

$('canvas').css({
    backgroundImage: 'url(' + image.src + ')',
    backgroundSize: "100%"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Answer 2

使用img标记在css中调整其给定大小，或者如果使用background属性，请使用“background-size：cover;”，如果您想要不均匀地拉伸图像，请使用“background-size：200px 300px ;“

Answer 3

试试这个

image.style.width = 200;

Answer 4

只使用CSS背景属性：

＆＃13;

var image = new Image();
image.src = 'http://www.ziiweb.com/images/logo.png';
$('canvas').css({
    background: 'url(' + image.src + ') no-repeat 0% 50%',
    backgroundSize: '100%',
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

＆＃13;

no-repeat，0% 50%将图像垂直对齐到中间，并将图像设置为适合canva的宽度。

更改从URL加载的图像的大小

4 个答案: