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

赞 (0)

相关推荐

  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra

  • 使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法.我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作. canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 复制代码 代码如下: var selectObj = null; function ImageCrop(c

  • canvas的神奇用法

    canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

  • php实现在新浪云中使用imagick生成缩略图并上传的方法

    本文实例讲述了php实现在新浪云中使用imagick生成缩略图并上传的方法.分享给大家供大家参考,具体如下: imagick是一款php的图像处理插件了我们可以使用imagick来进行许多的一些操作了,下面我们来看一篇关于php在新浪云中使用imagick的方法吧,具体的细节如下. php在新浪云中使用imagick生成缩略图并上传到Storage的方法 <?php //缩略图 $tmpFile ='http://XXXX.com/original.jpg' ; list($width, $he

  • Ajax 配合node js multer 实现文件上传功能

    Ajax 配合node js multer 实现文件上传功能

    说明 作为一个node 初学者,最近在做一个聊天软件,支持注册.登录.在线单人.多人聊天.表情发送.各种文件上传下载.增删好友.聊天记录保存.通知声开关.背景图片切换.游戏等功能,所以用到了multer 模块,经过各种查文档,做demo例子,终于成功实现单个文件上传功能,支持大部分文件格式上传,同时显示到网页上 效果 是不是有种微信即视感,没错,就是根据网页版微信来做的, 要实现整体效果的话,要配合css和html来做,前端初学者,第一次发博客,实在捉急,近期,将会将代码放到github上去,感

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

  • vue项目打包后上传至GitHub并实现github-pages的预览

    vue项目打包后上传至GitHub,并实现github-pages的预览 1. 打包vue 项目 vue项目: 命令行输入打包命令npm run build,生成了dist文件夹: 打包完成. 打包常见问题1--项目资源无法加载 打开刚刚打包好的dist文件夹,浏览器打开index.html 发现该页面是空白的,打开控制台发现 这里看到index.html文件中没有加载任何css.js文件. 解决方法--修改config文件 打开项目根目录config下的index.js文件,进行如下修改: 即

  • 在Koa.js中实现文件上传的接口功能

    文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

  • 如何基于js管理大文件上传及断点续传详析

    如何基于js管理大文件上传及断点续传详析

    目录 前言 前端结构 后端结构(node + express) 基于FormData实现文件上传 基于BASE64实现文件上传 BASE64具体方法 前端生成文件名传给后端 上传进度管控 大文件上传 服务端代码(大文件上传+断点续传) 总结 前言 前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点"力不从心"呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何

  • Node.js连接mongo数据库上传文件的方法步骤

    Node.js连接mongo数据库上传文件的方法步骤

    目录 效果 初始化 model 下创建index.js用于连接数据库时的信息 修改app.js文件里的信息 router下修改user.js文件 创建上传文件保存文件夹 在public下新建一个index.html 用于请求时的主页面 效果 初始化 创建项目文件夹mondo-express 安装包 npm i express-generator -g(作用一键生成项目列表) 在项目文件夹mondo-express用终端打开输入npx express-generator自动生成项目目录 安装包 终

  • JS使用base64格式上传文件

    本文实例为大家分享了JS使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /> <img id="txshow" style="width:100px;height:100px;"/> <br/>解析之后的base64数据:<br/> <p id="data"

随机推荐