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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
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简洁函数小结
2011/08/12 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
Javascript 二维数组
2009/11/26 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python实现求数列和的方法示例
2018/01/12 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
pip install命令安装扩展库整理
2021/03/02 Python
银行实习生的自我评价
2014/01/13 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
工会经费申请报告
2015/05/15 职场文书
首次购房证明
2015/06/19 职场文书