文档章节

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

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

简介

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
博文 11
码字总数 26325
作品 2
私信 提问
JavaScript中的图片处理与合成

JavaScript中的图片处理与合成(一) 65 人赞了该文章 摘要:图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工...

十万猛虎下画山
05/04
0
0
如何有效实现前端压缩图片并上传功能

  随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求。这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么...

燚轩科技
04/23
0
0
H5 和小程序拍照图片旋转、压缩和上传

原文地址:github.com/whinc/blog/… 最近接到一个“发表评论”的需求:用户输入评论并且可以拍照或从相册选择图片上传,即支持图文评论。需要同时在 H5 和小程序两端实现,该需求处理图片的...

whinc
09/29
0
0
JS异步上传压缩图片,并立即显示图片。

感谢 think2011 这位兄台的JS库:https://github.com/think2011/LocalResizeIMG 先看调用页面: <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=de......

zerodeng
2015/11/05
0
0
h5前端图片压缩直传到OSS,压缩用localResizeIMG插件

前段时间参与了一个H5项目,里边有个需求是用户上传图片。当时的方案是前端先调用微信的JSSDK选择图片并上传,然后再从后端下载到服务器上。然而用的时候发现客户端给的图片有大有小,但是由...

keller.zhou
03/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux之自定义命令

本人使用的是ubuntu系统,不喜欢建各种桌面快捷链接,但是每次启动个软件,去查找又麻烦,所以自定义了命令,来快捷的启动应用: 1、修改/etc/bash.bashrc,在文件末尾,加上如下List-1中的内...

克虏伯
17分钟前
2
0
linux基础

系统安全 sudo su chmod setfacl 进程管理 w top ps kill pkill pstree killall 用户管理 id usermod useradd groupad userdel 文件系统 mount umount fsck df du 网络应用 curl telnet mail......

关元
19分钟前
2
0
Caffe-源码分析(一)

CHECK_X函数,用于比较两个blob之间的值 CHECK_EQ(x,y)<<"x!=y",EQ即equation,意为“等于”,当x!=y时,函数打印出x!=y。 CHECK_NE(x,y)<<"x=y",NE即not equation,意为“不等于”,,...

Pulsar-V
20分钟前
1
0
三星Galaxy S10可能会配备TOF 3D摄像头

12月3日消息,据Phone Arena报道,三星Galaxy S10可能会配备TOF 3D摄像头。 Phone Arena报道称三星Galaxy S10一共有五颗摄像头(前置双摄+后置三摄),而5G版本的Galaxy S10后置四颗摄像头,...

问题终结者
43分钟前
10
0
fabric增删改查Mac

备份1.3版本,重新下载1.1版本到fabric文件夹 /opt/gopath/src/github.com/hyperledger/fabric -> /opt/gopath/src/github.com/hyperledger/fabric1.3 新建/opt/gopath/src/github.com/hype......

八戒八戒八戒
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部