文档章节

开发图片上传组件

d
 dragon_tech
发布于 01/12 09:42
字数 541
阅读 10
收藏 0

一、开发图片上传组件

组件具体内容,如图所示,顺便问一下,我如何在简书里面粘贴代码,按照网上说的方法更改富文本编辑,没有成功,估计编辑器发生变化了。

注意:imgUrl就是我们获取的图片地址

二、页面运用

三、页面效果

 

由于后台接口我们用的是阿里云的OSS服务,所以,代码就不贴了。感谢大家的收看。

忘了一个更重要的事情,那就是图片压缩的代码,把以下代码单独写在一个文件里,然后运用的时候调用即可。

```

/**

* 获得base64

* @param {Object} obj

* @param {Number} [obj.width] 图片需要压缩的宽度,高度会跟随调整

* @param {Number} [obj.quality=0.8] 压缩质量,不压缩为1

* @param {Function} [obj.before(this, blob, file)] 处理前函数,this指向的是input:file

* @param {Function} obj.success(obj) 处理后函数

* @example

*

*/

$.fn.localResizeIMG= function(obj) {

this.on('change',function() {

varfile= this.files[0];

varURL=URL||webkitURL;

varblob=URL.createObjectURL(file);

// 执行前函数

if($.isFunction(obj.before)) {obj.before(this, blob, file) };

_create(blob, file);

this.value='';// 清空临时数据

});

/**

* 生成base64

* @param blob 通过file获得的二进制

*/

function_create(blob) {

varimg= newImage();

img.src=blob;

img.onload= function() {

var_this= this;

//生成比例

varw=_this.width,

h=_this.width,

scale=w/h;

w=obj.width||w;

h=w/scale;

//生成canvas

varcanvas=document.createElement('canvas');

varctx=canvas.getContext('2d');

$(canvas).attr({width:w, height:h});

ctx.drawImage(_this,0,0, w, h);

/**

* 生成base64

* 兼容修复移动设备需要引入mobileBUGFix.js

*/

varbase64=canvas.toDataURL('image/jpeg',obj.quality||0.8);

// 修复IOS

if( navigator.userAgent.match(/iphone/i) ) {

varmpImg= newMegaPixImage(img);

mpImg.render(canvas, { maxWidth:w, maxHeight:h, quality:obj.quality||0.8, orientation:6});

base64=canvas.toDataURL('image/jpeg',obj.quality||0.8);

}

// 修复android

if( navigator.userAgent.match(/Android/i) ) {

varencoder= newJPEGEncoder();

base64=encoder.encode(ctx.getImageData(0,0,w,h),obj.quality*100||80);

}

// 生成结果

varresult={

blob:blob,

base64:base64,

clearBase64:base64.substr( base64.indexOf(',')+1)

};

// 执行后函数

obj.success(result);

};

}

};

 

/* 使用方法

$('input:file').localResizeIMG({

width: 100,

quality: 0.1,

//before: function (_this, blob) {},

success: function (result) {

var img = new Image();

img.src = result.base64;

$('body').append(img);

console.log(result);

}

});

*/

```

 

本文转载自:https://www.jianshu.com/p/1f87b350e3a2

共有 人打赏支持
d
粉丝 2
博文 222
码字总数 5622
作品 0
西安
私信 提问
在附件管理模块中增加对FTP 上传和预览的支持

在之前介绍的附件管理模块里面《Winform开发框架之通用附件管理模块》以及《Winform开发框架之附件管理应用》,介绍了附件的管理功能,通过对数据库记录的处理和文件的管理,实现了附件文件和...

walb呀
2017/12/04
0
0
vue-quill-editor上传内容由于图片是base64的导致字符太长的问题解决

vue-quill-editor是个较为轻量级富文本框,相较于ueditor,开发更编辑,更加直观,如果大家伙在需求允许的情况下,还是会比较建议使用vue-quill-editor vue-quill-editor的使用方法在这边就不...

灿爷的前端之路
2018/08/20
0
0
PHP开发——yii2多图上传组件的使用

最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页面的多图上传功能。使用的过程中...

Originalee
2018/04/17
0
0
用Vue开发仿旅游站webapp项目总结

用Vue开发仿旅游站webapp项目总结 (上) 该说的话,该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我,不过下下篇估计没了,这篇总结完,下下篇可能就是之后学习路的总结记录啦。...

大灰狼的小绵羊哥哥
2018/11/18
0
0
使用styled-components来进行react开发

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。 系列文章链接 ↓ ↓ 1. 面临...

大灰狼的小绵羊哥哥
2018/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

“韭菜”年年有,只是今年有点多

2018 年的交易日结束了,股市的“韭菜”们终于可以放心的过一个“一无所有”的节了。该赔的都赔完了,2019 年,很多人可能连当“韭菜”的资格都没有了。   同时,丁香医生的一篇《百亿保健...

问题终结者
9分钟前
2
0
天啦噜!在家和爱豆玩"剪刀石头布",阿里工程师如何办到?

阿里妹导读:如今,90、00后一代成为消费主力,补贴、打折、优惠等“价格战”已很难建立起忠诚度,如何与年轻人建立更深层次的情感共鸣?互动就是一种很好的方式,它能让用户更深度的参与品牌...

阿里云官方博客
34分钟前
1
0
聊聊flink的Table API及SQL Programs

序 本文主要研究一下flink的Table API及SQL Programs 实例 // for batch programs use ExecutionEnvironment instead of StreamExecutionEnvironmentStreamExecutionEnvironment env = Stre......

go4it
43分钟前
2
0
mysqldump应用

备份单个库/表数据或库/表结构 命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 备份文件名 1、导出数据库为dbname的表结构(其中用戶名為root,密码为dbpasswd,生成的...

阿dai
51分钟前
2
0
shell脚本与Python的交互

1、Python针对shell获取传入,输出参数 传入:"$num" 例如: $0表示文件名,$1表示shell获取的第一个参数 输出:通过打印shell结果的方式,输出参数给Python。 例如: echo "{$iplist}",Python调...

一口今心
54分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部