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 flash激活
Oct 19 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 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+Html+缓存
2006/12/20 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
以一段代码为实例快速入门Python2.7
2015/03/31 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python常用的json标准库
2019/02/19 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
岗位职责风险防控
2014/02/18 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
用Python实现屏幕截图详解
2022/01/22 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server