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

js图片压缩插件是什么-js插件到底是个什么东西?

原创:找图网 2023-05-03 12:06:43
  • 前端图片压缩优化工具conversion

  • image-conversion 是一个简单易用的 JS 图片转换工具,提供了多种 Image、Canvas、File 和 dataURL 之间的转换方法。

    另外,image-conversion 可以指定大小来压缩图片。

    1、将图像压缩到 200kb:

    2、以 0.9 的质量压缩图像

    image-conversion 提供了多种方法来实现 Image、Canvas、File 和 dataURL 之间的转换,如下:

    1、imagetoCanvas(image[, config]) {Promise(Canvas)}

    将图像对象转换为画布对象。

    2、dataURLtoFile(dataURL[, type]) {Promise(Blob)}

    将 dataURL

    字符串

    转换为 File(Blob) 对象,相当于把画布的内容转换成blob,type可以设置最终图片的格式。

    type的值可以为:"image/png", "image/jpeg", "image/gif"

    3、compress(file, config) {Promise(Blob)}

    压缩文件(Blob)对象。

    4、compressAccurately(file, config) {Promise(Blob)}

    根据大小压缩文件(Blob)对象。

    5、canvastoDataURL(canvas[, quality, type]) {Promise(string)}

    将 Canvas 对象转换为 dataURL 字符串,该方法可以进行压缩。

    6、canvastoFile(canvas[, quality, type]) {Promise(Blob)}

    将 Canvas 对象转换为 Blob 对象,此方法可以进行压缩。

    7、dataURLtoImage(dataURL) {Promise(Image)}

    将 dataURL 字符串转换为图像对象。

    8、downloadFile(file[, fileName])

    下载图片到本地。

    9、filetoDataURL(file) {Promise(string)}

    将 File(Blob) 对象转换为 dataURL 字符串。

    10、urltoBlob(url) {Promise(Blob)}

    通过图像 url 加载所需的 Blob 对象。

    11、urltoImage(url) {Promise(Image)}

    通过图片 url 加载所需的 Image 对象。

    觉得效果不错的请帮忙加个关注点个赞,经常分享前端实用开发技巧

  • 怎么用js实现图片的缩小?

  • 一般来说,实现图片的放大缩小功能都用到了比较大的封装插件,特别是以jQuery插件居多,而实际上单纯实现对原图本身的放大缩小,用简单几行原生JS代码就可以做到。在今天分享的这个实例中,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,有需要的朋友可以考虑收藏备用哦

    以下为全部代码:

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

            <title>javascript控制图片缩小或者放大</title>

        </head>

        <body>

            <script type="text/javascript">

                var oTime;

                function changeSize(id,action){

                 var obj=(id);

                 =parseInt()+(action=='+'?+10:-10)+'%';

                 oTime=('changeSize(\''+id+'\',\''+action+'\')',100);

                }

                =function(){

                 (oTime);

                }

            </script>

            <div style="height:350px; overflow: auto;">

            <img id="headImg" src="

            <button onmousedown="changeSize('headImg','+');" onmouseup="(oTime);">放大</button>

            <button onmousedown="changeSize('headImg','-');" onmouseup="(oTime);">缩小</button>

        </body>

    </html>

  • js插件到底是个什么东西?

  • JS插件就是把某些常见且通用行较强的需求封装好,以便自己或者别人能直接调用。插件就是封装好的用以解决某类问题(需求)的JS模块,当然其代码的构成是离开不开函数的。

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