更改从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的宽度。

智能推荐

注意!

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



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

赞助商广告