96编辑器旗下产品
找图
终身
ID:0
到期时间:永久
退出登录
您的位置:首页 > 百科管理 > 详情

网站缩略图在线生成网址-新浪t.cn短网址生成,超赞的网址缩短api接口

原创:找图网 2023-04-26 05:38:49
  • jquery 网页链接的缩略图怎么生成

  • jqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。

    jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图,在老的浏览器中它还能够替代background-size属性。

    jqthumb兼容性超强,可以工作在所有现代浏览器甚至是IE6+上,jQuery

    1.3以上版本即可运行。它还可以在Zepto(通过zepto-data插件)v1.1.3+上运行。

    这个jquery插件可以帮助我们按比例生成图片缩略图。大家可能知道在处理缩略图的时候使用 background-size: cover; 可以解决许多棘手问题。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而该插件正是弥补了这个缺陷。

    使用方法

    使用以下的简单html结构:

    <div style="width: 100%; height: 400px;">

    <img src="path/" class="example1" />

    </div>

    <div style="width: 400px; height: 400px;">

    <img src="path/" class="example2" />

    </div>

    <button id="kill">Kill</button>

    <button id="kill-all">Kill All</button>

    在页面中引入jQuery和文件:

    <script type="text/javascript" src="scripts/"></script>

    <script type="text/javascript" src="scripts/"></script>

    然后按下面方法调用插件:

    <script type="text/javascript">

    $(function(){

    // plugin initialization

    $('img').jqthumb({

    classname : 'jqthumb', // class name. DEFUALT IS jqthumb

    width : '100%', // new image width after cropping. DEFAULT IS 100px.

    height : '100%', // new image height after cropping. DEFAULT IS 100px.

    position : {

    x : '50%', // x position of the image. DEFAULT is 50%. 50% also means centerize the image.

    y : '50%' // y position of the image. DEFAULT is 50%. 50% also means centerize the image.

    },

    source : 'src', // to specify the image source attribute. DEFAULT IS src.

    show : false, // TRUE = show immediately after processing. FALSE = do not show it. DEFAULT IS TRUE.

    responsive : 20, // used by older browsers only. 0 to disable. DEFAULT IS 20

    zoom : 1, // zoom the output, 2 would double of the actual image size. DEFAULT IS 1

    method : 'auto', // 3 methods available: "auto", "modern" and "native". DEFAULT IS auto

    before : function(oriImage){ // callback before each image starts processing.

    alert("I'm about to start processing now...");

    },

    after : function(imgObj){ // callback when each image is cropped.

    (imgObj);

    },

    done : function(imgArray){ // callback when all images are cropped.

    for(i in imgArray){

    $(imgArray[i]).fadeIn();

    }

    }

    });

    // kill command

    $('#kill').click(function(){

    $('.example1').jqthumb('kill');

    });

    // kill all command

    $('#kill').click(function(){

    $.jqthumb('killall');

    });

    });

    </script>

    BOWER

    bower install jqthumb

    可用参数

    source:图片的URL属性。例如:<img src="path/" />的source是 src。

    $('img').jqthumb({

    source : 'attr-src' // DEFAULT: src

    });

    classname:生成的缩略图的class名称。当你想使用外部css来渲染缩略图时该参数十分有用。

    $('img').jqthumb({

    width : 200, // DEFAULT: 100

    height : '100%' // DEFAULT: 100

    });

    position:通过 X 和 Y作为关键参数来定义一个对象。y用于跳转缩略图上下位置,x用于跳转缩略图的左右位置。注意: position.x 和 position.y必须在定义的width和height的范围里面。如果你用百分比来定义position.x 和 position.y,请确保它们在0-100%之间。

    $('img').jqthumb({

    position: {

    x : 20, // DEFAULT: '50%'

    y : '30%' // DEFAULT: '50%'

    }

    });

    show:是否在处理完成后显示缩略图:

    $('img').jqthumb({

    show : false // DEFAULT: true

    });

    responsive:该参数只是在浏览器不支持 CSS3 的时候才使用。为了在旧的浏览器上完成响应式效果,该插件在$(window).resize()事件被触发的时候会重新计算。设置为0则在旧的浏览器中不使用响应式效果。在现代浏览器中不支持禁用响应式特性,可以使用method :"native"来禁止它。

    /* responsive only works for native method / older browsers */

    $('img').jqthumb({

    responsive : 10 // DEFAULT: 20

    });

    /* to disable responsive feature in modern method / browsers, switch method to native */

    $('img').jqthumb({

    method : 'native', // DEFAULT: auto

    responsive : 0 // DEFAULT: 20

    });

    zoom:放大或缩小缩略图:

    $('img').jqthumb({

    zoom : 3 // DEFAULT: 1

    });

    method:该按比例是否缩略图插件提供两种方法:一种使在浏览器支持 CSS3 的时候使用,一种是浏览器不支持CSS3的时候使用。有时候你可能需要切换这两种方法来做些测试。默认情况下,该插件会自动检测浏览器是否支持CSS3然后调用相应的方法。

    $('img').jqthumb({

    method : 'native' // Availability: "auto", "modern", "native". DEFAULT: auto

    });

    before:这是在计算开始前的一个回调函数。该函数以参数的形式返回原始图片的source和对象。如果你在初始化的时候使用了多个对象class名称,那么这个函数会被调用两次。

    $('img').jqthumb({

    before : function(originalImage){

    (originalImage);

    }

    });

    after:这是在计算结束后的一个回调函数。该函数以参数的形式返回新生成的缩略图对象。如果你在初始化的时候使用了多个对象class名称,那么这个函数会被调用两次。

    $('img').jqthumb({

    after : function(newThumb){

    $(newThumb).fadeIn();

    }

    });

    done:这是在所有图片对象都被处理完毕后的一个回调函数。它返回所有缩略图的数组对象。

    $('img').jqthumb({

    done : function(thumbnails){

    for(i in thumbnails)

    $(thumbnails[i]).fadeIn();

    }

    });

    可用命令

    $('img').jqthumb('kill'); // destroy the plugin

    $.jqthumb('killall'); // destroy all generated thumbnails on the page

    更多的使用方法

    ...

    <img src="path/" />

    ...

    <script type="text/javascript">

    $(function(){

    $('img').jqthumb({

    width : 300,

    height : 200

    });

    });

    </script>

    ...

    <div data-jqthumb-src="path/"></div>

    ...

    <script type="text/javascript">

    $(function(){

    $('div').jqthumb({

    source : 'data-jqthumb-src'

    });

    });

    </script>

    ...

    <div style="width: 100%; height:500px;">

    <img src="path/" />

    </div>

    ...

    <script type="text/javascript">

    $(function(){

    $('div').jqthumb({

    width : '100%',

    height : '100%'

    });

    });

    </script>

    ...

    <img class="my-img" data-jqthumb-src="path/" data-jqthumb-width="200" data-jqthumb-height="200" />

    <img class="my-img" data-jqthumb-src="path/" data-jqthumb-width="200" data-jqthumb-height="180" />

    <img class="my-img" data-jqthumb-src="path/" data-jqthumb-width="200" data-jqthumb-height="160" />

    <img class="my-img" data-jqthumb-src="path/" data-jqthumb-width="200" data-jqthumb-height="140" />

    <img class="my-img" data-jqthumb-src="path/" data-jqthumb-width="200" data-jqthumb-height="120" />

    ...

    <script type="text/javascript">

    $(function(){

    $('.my-img').each(function(){

    var $img = $(this);

    $({

    source : $('data-jqthumb-src'),

    width : $('data-jqthumb-width'),

    height : $('data-jqthumb-height')

    });

    });

    });

    </script>

    ...

    <img class="my-img" src="path/" />

    ...

    <script type="text/javascript">

    $(function(){

    $('.my-img').jqthumb({

    width : 300,

    height : 300,

    show : false, // By default the image would be shown immediately after processing. To disable, set it to false

    after : function(croppedImg){ // This callback returns an object

    $(croppedImg).fadeIn(); // This would fade in the cropped image

    }

    });

    });

    </script>

    ...

    <img class="my-img" src="path/" />

    <img class="my-img" src="path/" />

    <img class="my-img" src="path/" />

    ...

    <script type="text/javascript">

    $(function(){

    $('.my-img').jqthumb({

    width : 300,

    height : 300,

    show : false, // By default the image would be shown immediately after processing. To disable, set it to false

    done : function(allCroppedImgs){ // This callback returns an array

    for(i in allCroppedImgs){

    $(allCroppedImgs[i]).fadeIn(); // This would fade in the cropped images one by one

    }

    }

    });

    });

    </script>

  • 新浪t.cn短网址生成,超赞的网址缩短api接口

  • 分享两个超赞的永久短网址api接口(附在线生成工具),便捷生成新浪t.cn短网址,亲测几个月,感觉非常稳定。短域名的应用场景很广,譬如短信营销、微博吸粉、淘宝客、京东商品营销、微信营销、QQ营销、自媒体推广、渠道推广等,都会用到链接缩短的功能,故觉得不错的,可以收藏使用。

    蓝鸟短链接是目前国内比较好的长链接缩短服务平台,该网站免费提供 新浪短网址 转化工具、 新浪短链接api ,无需注册会员即可免费转换。在线生成器支持批量缩短功能,接口支持高并发,无调用频率限制,转换后的短链均是永久有效。

    新浪短网址生成器:

    新浪短网址api接口:

    /api/tcn

    随着移动SEO的重要性越来越重要,在推广的时候如果把网页链接缩短可以获得更好的访问和收益。快鸟短网址提供了一个便捷的网址压缩工具,用户可以前往该网站免费制作 新浪t.cn短网址 ,同样该站也是支持批量转化的,这对于企业来说,使用起来不仅高效也很便捷。

    当然为了满足众多用户的需求,该平台也会提供稳定的api接口,如果觉得手动制作很不方便,也可以注册会员获取接口并调用生成。快鸟短网址以稳定的产品运营和高质量的服务,慢慢地也成为了国内最好的网址缩短服务商之一。

    新浪短网址在线生成器:

    新浪短链接api接口:

    /

    PS:

    1、如果出现参数丢失的情况,请先将长链接做urlencode编码,再转化器或者调用api缩短生成。

    2、上文提及的转化器和接口可以免费制作,且压缩后的短链有效期都是永久的,大家可以放心使用。

    3、生成的短链接没有访问量限制,大家可以放心使用。

    4、接口本质上是不限制调用频率的,但个人建议开发人员实时请求,不能太快。

  • url实现缩略图

  • 需要php环境支持GD库。

    <?php

    $img_name=$_GET['img']; //获取查询字符串

    $src_img=imagecreatefromjpeg($img_name);

    $ow=imagesx($src_img);

    $oh=imagesy($src_img);

    $desc_img=imagecreate(400,300);

    imagecopyresized($desc_img,$src_img,0,0,0,0,400,300,$ow,$oh);

    imagejpeg($desc_img);

    imagedestroy($desc_img);

    imagedestroy($src_img);

    ?>

    以上代码可以根据一个图片生成400*300的缩略图,如:

    要求1.jpg必须存在,大小任意。并且1.jpg和在同一目录下。

    也可以,不用改了,就用上面的。反正$img_name变量就是图片的url。你自己根据实际情况看着改吧。

    最新文章 更多
    最新素材 更多
    公司介绍 网站地图 图片资讯
    Copyright © 2010-2022 山东找图网络科技有限公司  鲁ICP备18007836号-3  邮箱:15653358549@163.com