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

hrz

v1.0.3

Published

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

Downloads

3

Readme

##修订者:会飞的猪 ###[h(韩)rz(resize)]

如何获取

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

  1. 执行npm i hrz(推荐)

  2. 执行bower install hrz

引入

  import hrz from 'hrz';

或者

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

如何使用

方式1:

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

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

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

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

七牛上传操作

//获取上传凭证(私有仓库,你懂的)
  getAppFproof(file).then(res => {
                 //提前压缩文件,矫正图片
                    hrz(file)
                        .then(function (rst) {
                            // 处理成功后调用文件上传(此时传入压缩后文件对象)
                            hThat.upload({file: rst.file, key: res.data.Data.Key, token: res.data.Data.Proof}, toast)
                        })
                        .catch(function (err) {
                            console.log(err);
                            // 处理失败会执行
                        })
                        .always(function () {
                            // 不管是成功失败,都会执行
                        });
                })

方式2:

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

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