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

Question

这里如何修改图片的大小？:

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

<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 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>