js生成缩略图后上传并利用canvas重绘


Posted in Javascript onMay 15, 2014

一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作。

此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作。

//以下为源代码

function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canvas>'), 
canvas = $canvas[0], 
context = canvas.getContext('2d'); 
var img = new Image(); 
img.onload = function(){ 
if(width){ 
if(width > img.width){ 
var target_w = img.width; 
var target_h = img.height; 
}else{ 
var target_w = width; 
var target_h = parseInt(target_w/img.width*img.height); 
} 
}else{ 
var target_w = img.width; 
var target_h = img.height; 
} 
$canvas[0].width = target_w; 
$canvas[0].height = target_h; 
context.drawImage(img,0,0,target_w,target_h); 
_canvas = canvas.toDataURL(); 
/*console.log(_canvas);*/ 
callback(obj,_canvas); 
} 
img.src = getFullPath(obj); 
} 
function getFullPath(obj) 
{ 
if(obj) 
{ 
//ie 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
obj.select(); 
return document.selection.createRange().text; 
} 
//firefox 
else if(window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla) 
{ 
if(obj.files && window.URL.createObjectURL) 
{ 
return window.URL.createObjectURL(obj.files[0]); 
} 
return obj.value; 
}else if($.browser.safari){ 
if(window.webkitURL.createObjectURL && obj.files){ 
return window.webkitURL.createObjectURL(obj.files[0]); 
} 
return obj.value; 
} 
return obj.value; 
} 
}

函数getFullPath为获取选中的图片的地址。

_canvas获取到的是base64编码的图片编码,将其传输到后端写入文件即可。

Javascript 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
Jquery性能优化详解
May 15 #Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 #Javascript
Javascript小技巧之生成html元素
May 15 #Javascript
javascript屏蔽右键代码
May 15 #Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 #Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 #Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 #Javascript
You might like
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
PyTorch中Tensor的维度变换实现
2019/08/18 Python
Python 忽略文件名编码的方法
2020/08/01 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
一份全面的PHP面试问题考卷
2012/07/15 面试题
五水共治捐款倡议书
2014/05/14 职场文书
水利水电专业自荐信
2014/07/08 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python