npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lrz-lw

v4.9.41

Published

前端本地客户端压缩图片,兼容IOS,Android,PC、自动按需加载文件

Downloads

8

Readme

Build Status npm version npm

重要!!

挺忙的,暂时没有精力维护这个项目,使用之前请一定留意 Issues 里已知的问题

演示一下

自己试试

点我直接进入演示页面

说明

在客户端压缩好要上传的图片可以节省带宽更快的发送给后端,特别适合在移动设备上使用。

为什么需要

  1. 已踩过很多坑,经过几个版本迭代,以及很多很多网友的反馈帮助、机型测试

    • 图片扭曲、某些设备不自动旋转图片方向,没有jpeg压缩算法..
    • 不支持new Blob,formData构造的文件size为0..
    • 还有某些机型和浏览器(例如QQX5浏览器)莫名其妙的BUG..
  2. 按需加载(会根据对应设备自动异步载入JS文件,节省不必要带宽)

  3. 原生JS编写,不依赖例如jquery等第三方库,支持AMD or CMD规范。

尽管如此,在某些 Android 下依然有莫名其妙的问题,在您使用前,请一定大致浏览下 issues

如何获取

通过以下方式都可以下载:

  1. 执行npm i lrz(推荐)
  2. 执行bower install lrz

接着在页面中引入

<script src="./dist/lrz.bundle.js"></script>

如何使用

方式1:

如果您的图片来自用户拍摄或者上传的,您需要一个input file来获取图片。

<input id="file" type="file" accept="image/*" />

接着通过change事件可以得到用户选择的图片

document.querySelector('#file').addEventListener('change', function () {
	lrz(this.files[0])
        .then(function (rst) {
            // 处理成功会执行
            console.log(rst);
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败,都会执行
        });
});

方式2:

如果您的图片不是来自用户上传的,那么也可以直接传入图片路径。

lrz('./xxx/xx/x.png')
        .then(function (rst) {
            // 处理成功会执行
        })
        .catch(function (err){
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败,都会执行
        });

后端处理

后端处理请查看WIKI。

API

具体参数说明请查看WIKI。

兼容性

IE10以上及大部分非IE浏览器(chrome、微信什么的)

FAQ

有疑问请直接在 issues 中提问

请一定记得附上以下内容:💡
请一定记得附上以下内容:🙈
请一定记得附上以下内容:💡

平台:微信..
设备:iPhone5 IOS7..
问题:问题描述呗..
  • Q:能否提供完整的一套UI?

  • A:暂时定位是作为纯粹的处理插件,或许会考虑开发一整套UI。

  • Q:有时拍摄完照片后,页面自动刷新或闪退了。

  • A:虽然已作了优化处理,但内存似乎还是爆掉了,常见于低配android手机,建议每次只处理一张图片。

  • Q: 怎么批量上传图片?

  • A: 您可以自己写个循环来传入用户多选的图片,但在移动端上请谨慎处理,原因同上。

  • Q: 直接传入图片路径的无法生成图片

  • A: 可能是跨域的问题,具体请看CORS_enabled_image

  • Q: 想要商用可以吗?

  • A: 没问题,但请留意issue里已知的问题。

开发

想要参与 or 自己定制 or 了解源码请点击这里,逻辑和说明

感谢

  • @dwandw
  • @yourlin
  • @wxt2005

以上在之前的版本帮忙参与维护的朋友,以及提出问题的朋友们,真的真的很感谢你们。:D