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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
javascript回到顶部特效
Jul 30 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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 DataGrid 实现代码
2009/08/12 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
python正则分组的应用
2013/11/10 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
优良学风班申请材料
2014/02/13 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA