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编码的图片编码,将其传输到后端写入文件即可。

------------------------------------------------------------------------------------

js生成缩略图后上传并利用canvas重绘的更多相关文章

  1. 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

    使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...

  2. php 图片操作类,支持生成缩略图,添加水印,上传缩略图

    <?php class Image {     //类开始     public $originimage = ""; //源图片文件地址     public $image ...

  3. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  4. JavaScript进阶(九)JS实现本地文件上传至阿里云服务器

    JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...

  5. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  6. js插件---IUpload文件上传插件(包括图片)

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  7. Dedecms v5.7包含上传漏洞利用

    Title:Dedecms v5.7包含上传漏洞利用 --2012-09-21 10:16 注册,登录,免邮箱验证. up.htm ---------------------------------- ...

  8. 简单的 Android 拍照并显示以及获取路径后上传

    简单的 Android 拍照并显示以及获取路径后上传 Activity 中的代码,我只贴出重要的事件部分代码 public void doPhoto(View view) { destoryBimap ...

  9. C# 防止content-type修改后上传恶意文件

    以图片为例子.在上传图片的时候,使用Fiddler抓取 通过js判断文件类型是不安全的,所以通过后台来判断,代码如下: ) { HttpPostedFile file0 = Request.Files ...

随机推荐

  1. OpenStack调研

    OpenStack调研:OpenStack是什么.版本演变.组件关系(Havana).同类产品及个人感想 一点调研资料,比较浅,只是觉得部分内容比较有用,记在这里: 首先,关于云计算,要理解什么是SA ...

  2. JS核心概念

    Javascript本质第一篇:核心概念   很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽 ...

  3. cocos2d(CCSprite 用贝塞尔做抛物线,足球精灵并且同时做旋转放大效果)

    今天刚学到Cocos2d中的动作哪一张,自己做了一个用贝塞尔曲线足球精灵实现同时放大旋转和抛物线动作. 使用 [CCSpawn actions:,,]链接这几个动作,同时做.与CCSequence(一 ...

  4. .net下将富文本编辑器文本原样读入word文档

    关键词:富文本编辑器  生成word  样式 为了解决标题中提出的问题,首选需要了解,在.net环境下读取数据库中的内容动态生成word至少有2种方式,[方式一]一种方式是在项目中添加引用,例如在“添 ...

  5. Cocoa框架

    Cocoa提供了用于存放数字和字符串的通用数据类型的实际的类.非正式地可以将这些称为值类或基本值类. Cocoa框架本身封装了三个独立的框架:Foundation基本框架.AppKit框架和核心数据框 ...

  6. scribefire 多博客管理利器 安装详解

    scribefire 多博客管理利器 安装详解 一.ScribeFire介绍 ScribeFire 是 Firefox (火狐浏览器)上著名的博客写作工具,目前已跨平台支持多浏览器(Firefox,C ...

  7. 最简单的linux内存清理方法

    vmstat -s 查看剩余内存 然后用一下命令清理内存 echo 1 > /proc/sys/vm/drop_caches

  8. ffmpeg利用libav库把yuv视频流转换为TS串流

    今天到月末了,才发我这个月的第一篇文章,因为这个月前三周一直在看ffmpeg的libavcodec和libavformat两个库源码.实验室要做一个“小传大”的软件,就是android手机或平板电脑的 ...

  9. java BigInteger源码学习

    转载自http://www.hollischuang.com/archives/176 在java中,有很多基本数据类型我们可以直接使用,比如用于表示浮点型的float.double,用于表示字符型的 ...

  10. 一个简单的使用restc demo

    最近不经意间看到饿了么团队开发的restc,接口调试工具(类似postman),其实调试接口都没用过工具,每次都只是运行起项目直接调接口.闲来无事,看到restc,就决定试试,后面觉得挺不错的,就分享 ...