更改从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>