this jquery script can crop image correct size tweaking image url. jquery script in web have found crop image of specific div/elements. problem script not able crop image correct size, script's width-height variable var w = 200 , var h = 150 problem width variable not working, cropped images height , width became same size. means height variable works, output cropped image became 150px x 150px. it should 200px x 150px.
js:
var w = 200; var h = 150; $('.crop').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/s\b\d{2,4}/,'s' + w + '-h' + h +'-c')}); image.attr('width',w); image.attr('height',h); }); problem fiddle >
note: i'm using latest chrome , it's not working, version 43.0.2357.130 , not work in latest firefox. , please see original size using inspect element [shift+ctrl+i] or download cropped image.
i have not able find reason/problem why images not crop correct size? , solution? please :(
thanks in advance.
i found topic, , make test,
then find out s200-h150-c seems weird
so replace
image.attr({src : image.attr('src').replace(/s\b\d{2,4}/,'s' + w + '-h' + h +'-c')});
to
image.attr({src : image.attr('src').replace(/s\b\d{2,4}/,'w' + w + '-h' + h +'-c')});
with s200-h150-c become w200-h150-c, , works. not sure there's typo on origin post or function changed.
var w = 200; var h = 150; $('.crop').find('img').each(function(n, image){ var image = $(image); image.attr('src' , image.attr('src').replace(/s\b\d{2,4}/,'w' + w + '-h' + h +'-c')); image.attr('width',w); image.attr('height',h); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> please save croped image see actual result. <br/><br/> 1) after crop (result: 150px x 150px ) <br><br> <div class="crop"> <img src="http://1.bp.blogspot.com/-r7xpicyjsza/vraucqtev1i/aaaaaaaablc/pssero55dig/s1600/artworks-000103151765-uxzfpd-t500x500.jpg"/> </div> <br/><br/> 2) after crop (result: 150px x 150px ) <br/><br/> <div class="crop"> <img src="http://4.bp.blogspot.com/-ytdve4-4l0o/vikanlocrci/aaaaaaaaau0/8q0mkvjygze/s1600/pc-type65756.jpg"/> </div> <br/>
Comments
Post a Comment