js生成缩略图后上传并利用canvas重绘
更新时间:2014年05月15日 10:51:57 作者:
这篇文章主要介绍了js生成缩略图后上传,利用canvas重绘,需要的朋友可以参考下
一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作。
此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作。
//以下为源代码
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编码的图片编码,将其传输到后端写入文件即可。
此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作。
//以下为源代码
复制代码 代码如下:
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中callee和caller的区别与用法实例分析
这篇文章主要介绍了JavaScript中callee和caller的区别与用法,结合实例形式分析了javascript中callee和caller的功能、区别、用法及操作注意事项,需要的朋友可以参考下2019-06-06原生javascript实现addClass,removeClass,hasClass函数
这篇文章主要介绍了原生javascript实现addClass,removeClass,hasClass函数的相关代码,有需要的小伙伴可以参考下2016-02-02JS使用canvas中的measureText方法测量字体宽度示例
这篇文章主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下2019-02-02
最新评论