更改從URL加載的圖像的大小

[英]Change size of an image loaded from URL


How to modify the size of the image here?:

如何在這里修改圖像的大小?:

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>

4 个解决方案

#1


5  

You are inserting the image as a background, so use background-size.

您正在將圖像作為背景插入,因此請使用背景大小。

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>

#2


2  

use an img tag which adujsts to its given size in css, or if using the background property, use "background-size: cover;", if you want to unevenly strech the image, use "background-size: 200px 300px;"

使用img標簽在css中按照給定的大小進行調整,或者如果使用background屬性,請使用“background-size:cover;”,如果要對圖像進行不均勻拉伸,請使用“background-size:200px 300px;”

#3


0  

Try this

image.style.width = 200;

image.style.width = 200;

#4


0  

Just play with CSS background properties:

只需使用CSS背景屬性:

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

no-repeat, 0% 50% to place the image vertical aligned to the middle and set the image to fit the canva's width.

不重復,0%50%將圖像垂直對齊到中間,並將圖像設置為適合canva的寬度。

关注微信公众号

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/04/09/7def2d85600f00dc74bc8c87ea70af7d.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com