文档章节

JS前端上传图片、压缩、并且处理旋转问题,生成base64数据

大弹簧
 大弹簧
发布于 2017/09/05 17:33
字数 269
阅读 2.8K
收藏 2

精选30+云产品,助力企业轻松上云!>>>

简介

JS前端上传图片、压缩、并且处理旋转问题,生成base64数据

演示地址

http://www.tkc8.com/test/pic/index.html

代码

https://github.com/big-sponge/js-image-base64

示例代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>image-test</title>
    <meta charset="utf-8"/>
    <script src="jquery-2.1.4.js" type="text/javascript"></script>
    <script src="base64image.js" type="text/javascript"></script>
    <script src="exif.js" type="text/javascript"></script>  
</head>
<body>
<input type="file" style="display: none" onchange="fileUp(this)" id="file-up">
<input type="button" value="点我上传图片"  onclick="$('#file-up').click();" />
<div id='image-list'>
</div>
    <script>
        var fileUp = function (me) {
            base64Image({
                file: me,                              /*【必填】对应的上传元素 */
                callback: function (imageUrl) {        /*【必填】处理成功后的回调函数 */
                    /*imageUrl为得到的图片base64数据,这里可以进行上传到服务器或者其他逻辑操作 */
                    var img = new Image();
                    img.src = imageUrl;
                    $("#image-list").append(img);       
                },
                width:750,                          /*【选填】宽度默认750,如果图片尺寸大于该宽度,图片将被设置为该宽度*/
                ratio:0.75,                         /*【选填】压缩率默认0.75 */
            });
        };
    </script>
</body>
</html>

大弹簧

大弹簧

粉丝 16
博文 12
码字总数 26337
作品 2
私信 提问
加载中
请先登录后再评论。
图片的裁剪上传

以下内容来自https://www.cnblogs.com/tangshiguang/p/6746206.html,个人认为这种功能较为有意思所以搬运 由于前端是不能直接操作本地文件的,要么通过用户点击选择文件或者拖拽的方式,要么...

osc_f5e60qdm
2018/06/07
2
0
怎样实现前端裁剪上传图片功能

怎样实现前端裁剪上传图片功能 由于前端是不能直接操作本地文件的,要么通过用户点击选择文件或者拖拽的方式,要么使用flash等第三方的控件,但flash日渐衰落,所以使用flash还是不提倡的。同...

osc_kpp7htz3
2018/07/07
2
0
移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传。 这个功能模块主...

osc_e4gzv47r
2018/02/09
15
0
html5 前端语言 博客目录

1,html html 浏览器接收的常用 content-type html 元素超出部分滚动, 并隐藏滚动条 html 图片宽高自适应,居中裁剪不失真 html 元素文字超出部分显示省略号(支持多行),兼容几乎所有常用浏...

被遗忘的优雅
03/25
0
0
基于前端的图片压缩处理

问题提出 1 前端上传图片很大,上传到服务器很慢,占用网络资源,降低用户体验 2 ios拍摄的照片(竖着拍) 会有角度改变 (图片对象信息里会有角度信息 该信息 不可更改 (待考证,因为我使用...

mircle
06/03
11
0

没有更多内容

加载失败,请刷新页面

加载更多

题解-洛谷P4724 【模板】三维凸包

洛谷P4724 【模板】三维凸包 给出空间中 \(n\) 个点 \(p_i\),求凸包表面积。 数据范围:\(1\le n\le 2000\)。 这篇题解因为是世界上最逊的人写的,所以也会有求凸包体积的讲解。 三位向量的...

osc_srnunz15
25分钟前
11
0
关于RNN (循环神经网络)相邻采样为什么在每次迭代之前都需要将参数detach

关于RNN (循环神经网络)相邻采样为什么在每次迭代之前都需要将参数detach 这个问题出自《动手学深度学习pytorch》中RNN 第六章6.4节内容,如下图所示: 当时看到这个注释,我是一脸懵逼,(...

osc_rl6hs0bo
25分钟前
11
0
为什么 wait 方法要在 synchronized 中调用?

作者:Yujiaao https://segmentfault.com/a/1190000019962661 一个有难度的 Java 问题,wait 和 notify。 它们是在有 synchronized 标记的方法或 synchronized 块中调用的,因为 wait 和 no...

Java技术栈
26分钟前
10
0
【退役贴】真·蒟蒻的acm感悟&回忆

窝是一只打过铁费了很大力气仍然只能大四拿铜的辣鸡的辣鸡的辣鸡…… 窝是一只打过铁费了很大力气仍然只能大四拿铜的辣鸡的辣鸡的辣鸡…… 窝是一只打过铁费了很大力气仍然只能大四拿铜的辣鸡...

osc_sqfqhs81
26分钟前
14
0
查询反模式 - GroupBy、HAVING的理解

为了最简单地说明问题,我特地设计了一张这样的表。    一、GROUP BY单值规则   规则1:单值规则,跟在SELECT后面的列表,对于每个分组来说,必须返回且仅仅返回一个值。   典型的表现...

osc_n87a5jpv
27分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部