专栏首页IMWeb前端团队图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

图片上传前预处理,等比缩放、裁剪 (html5 + canvas)

源码地址:https://github.com/capricorncd/image-process-tools

解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。后期版本应该会加入手动设置裁剪位置及缩放比例。 处理完成后,将返回处理完成的数据,及原图片文件的大小、宽度、高度和Base64数据。(详见参数说明) 非图片文件将不做处理,返回文件数据data(name, lastModified, lastModifiedDate, size, type)等信息

使用方法

<div id="imgWrapper">
    <!-- 图片预览容器 -->
</div>
<div id="progressElm">
    <!-- 图片处理进度 -->
</div>
<div>
    <button id="buttonId">选择图片</button>
</div>

<script src="../build/image-process-tools.min.js"></script>

<script>
    var imgTools = new IPTS({
        // 选择按钮id
        elm: 'buttonId',
        // 图片预览容器 id,容器height!=0
        target: 'imgWrapper',
        // 是否裁剪图片。为true时,必须同时设置width、height值大于0
        crop: true,
        // 缩放宽高
        width: 640,
        height: 640,
        // 处理后图片的格式,支持jpg、png格式
        // type: 'jpg',
        // 处理完成回调函数
        success: function (result) {

            // 所有返回参数
            console.log(result);

            if (result.code === 0) {
                console.log('裁剪或压缩后的图片数据:');
                console.log(result.data);
                console.log('处理后图片文件大小为:' + imgTools.conversion(result.size));

                console.log('原图片数据:');
                console.log(result.rawdata);
                console.log('原图片文件大小为:' + imgTools.conversion(result.rawdata.size));
            }

            /**
             * result.data //待上传的图像数据
             * 可将result.data写入input[value],利用form表单上传
             * 或直接通过如腾讯云接口直接上传,如下:
             */
            /**
             * 腾讯云上传实例,详见腾讯云文件上传文档
             * https://www.qcloud.com/document/product/436/8095
             */

        },
        // 图片处理进度
        // progress {Number} 0-1范围
        progress: function (progress) {
            // 显示进度的元素
            document.getElementById('progressElm') = progress;
            console.log(progress);
        },
        // 处理过程中的错误提示
        error: function (err) {
            console.warn(err.msg);
        }
    });
</script>

Vue.js 2.0中使用

需异步初始化

<script type="text/ecmascript-6">
  // 文件路径,根据自己的文件修改
  import IPTS from './path/image-process-tools.min';

  export default {
    data () {
      return {
        // 待上传的文件数据
        uploadData: null
      }
    },
    created () {
      this.$nextTick(() => {
        this.initUploadData();
      });
    },
    methods: {

      // 图片选择按钮方法@click="selectImage"
      selectImage () {
        // 模拟 selectorFileBtn 被点击
        let btn = document.getElementById('selectorFileBtn');
        // 模拟input点击事件
        let evt = new MouseEvent("click", {
          bubbles: false,
          cancelable: true,
          view: window
        });
        btn.dispatchEvent(evt);

        return false;
      },


      // 初始化上传数据
      initUploadData () {

        let vm = this;

        let imgTools = new IPTS({
            elm: 'selectorFileBtn',
            target: 'imgWrapper',
            crop: true,
            width: 640,
            height: 640,
            success: (res) => {
                // 存储数据,方便上传时读取
                vm.uploadData = res.data;
            },
            error: (err) => {
                console.warn(err.msg);
            }
        });

      }

    }
  }
</script>

修改后的文件生成,并压缩:

npm run build

使用效果图

Options 参数

  • elm: buttonId 选择图片按钮id(必须)
  • target: imgWrapper 图片预览容器id(可选)
  • crop: true 是否裁剪图片(可选)

为true时,必须同时设置width、height值大于0 裁剪规则: 图片缩放到一定比列(即一边等于设置值,另一边超出设置值部分裁去),居中裁剪

  • width: 640 裁剪或缩放宽度为640px(可选)

不配置crop,或crop为false时,则为缩放尺寸。 1.限制宽度缩放,则只需设置width值。 2.限制高度缩放,则只需设置height值。 3.若crop为false,同时设置了width/height值,则只按width缩放,忽略height

  • height: 640 裁剪或缩放高度为640px(可选)
  • type: jpg 上传图片目标格式,默认jpg/png(可选)

1.不配置此项,则保留原图片格式(bmp文件会转换成jpg, gif会转换为png)。 2.配置后,将所有格式图片转换为配置格式。 3.可选值'jpg', 'png'。 4.HTMLCanvasElement.toDataURL()不支持'gif', 'bmp',均输出'png'格式

  • success: function(result){ console.log(result) } 图片处理完成后的回调函数

code: 0 成功代码 data: blobData 处理成功的图片数据,可直接上传至服务器,或赋值给input利用form表单提交。 element: canvas canvas节点对象 msg: success 成功消息 width: 640 处理完成的图片宽度 height: 640 处理完成的图片宽度 size: 21100 处理完成的图片文件大小 type: image/png 处理完成的图片类型 rawdata: Object 原图片相关属性(宽高/文件大小/Base64编码数据/类型/元素节点) data: base64Data, 原图片base64格式数据 element: image, 原图片接到对象 height: 1200, 原图片高度 size: 215444, 原图片文件大小 type: image/png, 原图片格式 width: 2000 原图片宽度

  • progress: function(progress){ console.log(progress); } 图片处理据进度,范围0-1。仅对处理图片有效,非图片文件没有回调。
  • error: function(err){ alert(err.msg); } 处理过程中的错误或警告回调函数

部分接口

  • conversion(size) // 将size单位B转换为KB或M(大于1024KB则返回M)
  • getFileSuffix(fileName) // 获取文件后缀名
  • isImage(fileName) // 判断文件是否为图片格式
  • toBlobData(Base64Data, type) // 将图片base64数据转换为blob可上传的数据; type可选,默认与Base64Data类型相同,支持类型image/png, image/jpeg

返回code说明

成功code

code

msg

0

成功,程序正常完成整套流程,并返回最终结果

1

选中的文件非图片文件,返回选中文件数据data

错误code

code

msg

1

配置参数未配置或有误

2

配置图片选择按钮id

3

浏览器不支持addEventListener()

4

浏览器不支持FileReader接口,需升级或更换高版本的浏览器

5

未选中文件

6

选中的文件不是图片文件

7

文件读取错误

8

图片数据加载错误

9

当前图片文件尺寸小于裁剪尺寸

源码地址:https://github.com/capricorncd/image-process-tools

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人脸识别简介(使用Python代码)

    人脸识别是计算机视觉的一个子领域,它的应用范围非常广泛,现在已经成为世界各地的企业争相竞逐的新技术之一。考虑到市场的盈利现状,未来这项技术还会有更大的需求空间,...

    小小詹同学
  • 循环、递归与魔术(二)——循环的魔术逻辑浅析与欣赏

    在上一篇中,我们讲了循环和递归的数学和计算机概念,并举例说明其是一种在生活中的无处不在的结构。相关回顾:

    magic2728
  • OpenCV-加载和保存图片

    OpenCV中有很方便的加载保存图片的函数,这里总结一下,通过本小节你可以学到下面三个函数:

    Chenkc
  • 基础知识 | 每日一练(174)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • 基础知识 | 每日一练(173)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • 有必要将所有机器学习算法都实现一遍吗?

    https://www.zhihu.com/question/36768514/answer/376510114

    小白学视觉
  • 基础知识 | 每日一练(172)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • 基础知识 | 每日一练(171)

    士人有百折不回之真心,才有万变不穷之妙用。立业建功,事事要从实地着脚,若少慕声闻,便成伪果;讲道修德,念念要从虚处立基,若稍计功效,便落尘情。 ...

    闫小林
  • 机器学习入门 4-1 k近邻算法基础

    k近邻算法是机器学习中最简单的算法之一,他是入门机器学习中的第一个算法。K近邻算法:

    Chenkc
  • 什么是基数排序?

    老读者可能比较熟悉,刚开始的时候写了一个排序算法系列,把常见的排序算法都写了,有兴趣的可以在公众号内的目录菜单栏中选择数据结构与算法查看。

    用户1260737

扫码关注云+社区

领取腾讯云代金券