文档章节

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

大弹簧
 大弹簧
发布于 2017/09/05 17:33
字数 269
阅读 85
收藏 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
如何有效实现前端压缩图片并上传功能

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

燚轩科技
04/23
0
0
JavaScript中的图片处理与合成

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

十万猛虎下画山
05/04
0
0
H5 和小程序拍照图片旋转、压缩和上传

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

whinc
09/29
0
0
h5前端图片压缩直传到OSS,压缩用localResizeIMG插件

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

keller.zhou
03/13
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

没有更多内容

加载失败,请刷新页面

加载更多

Android JNI 开发系列(九)JNI调用Java的静态方法&实例方法

JNI调用Java的静态方法&实例方法 package org.professor.jni.bean;import android.util.Log;/**- Created by peng on 2018/10/11. */ public class Person { /** ...

蔡小鹏
4分钟前
0
0
Flink 原理与实现:Window 机制

Flink 认为 Batch 是 Streaming 的一个特例,所以 Flink 底层引擎是一个流式引擎,在上面实现了流处理和批处理。而窗口(window)就是从 Streaming 到 Batch 的一个桥梁。Flink 提供了非常完...

xtof
6分钟前
0
0
Fabric.js高级点的教程2--添加表格的方法

有时候我们先在画布上画一个表格类似一下设计软件那种。一方面作为参考线,一方面给人一直专业的赶脚。。。 先贴上一段网上(不是我写的)可以运行的代码 https://codepen.io/rodan8888/pen/e...

xmqywx
7分钟前
0
0
Java中Lambda表达式的使用

Java中Lambda表达式的使用 简介 (译者注:虽然看着很先进,其实Lambda表达式的本质只是一个"语法糖",由编译器推断并帮你转换包装为常规的代码,因此你可以使用更少的代码来实现同样的功能。本人...

DemonsI
10分钟前
0
0
深入理解Java中停止线程

一.停止线程会带来什么? 对于单线程中,停止单线程就是直接使用关键字return或者break,但是在停止多线程时是让线程在完成任务前去开启另外一条线程,必须放弃当前任务,而这个过程是不可预...

Ala6
19分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部