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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
Vue-component全局注册实例
Sep 06 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
浅谈js中的bind
2019/03/18 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python补齐字符串长度的实例
2018/11/15 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
企业节能减排实施方案
2014/03/19 职场文书
医德医风个人总结
2015/02/28 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
2019 入党申请书范文
2019/07/10 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
JavaScript 反射学习技巧
2021/10/16 Javascript