php canvas 图片上传,JavaScript_js生成缩略图后上传并利用canvas重绘，一般在处理图片上传时，通常 - phpStudy...

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

一般在处理图片上传时，通常的逻辑都是将源图片上传到服务器端，再由服务器端的语言进行缩放大小的操作。

此种模式一般可以满足大部分的需求，但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图，再使用此种模式，将是一种浪费服务端资源以及带宽的方式，故我们考虑在浏览器端生成小图后再进行上传操作。

//以下为源代码

function drawCanvasImage(obj,width, callback){

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

CSS中float和clear各是什么意思有哪些区别

JavaScript+html5 canvas制作色彩斑斓的正方形效果

win10升级后软件会没吗？升级Win10：哪些东西会丢失

Win10正式版升级到89%电脑自动重启之后硬盘数据全部丢失该怎么办？

mod_php、FastCGI、PHP-FPM等PHP运行方式对比

在CentOS系统中检测Java安装及运行jar应用的方法

Java编程中正则表达式的用法总结

sqlserver 因为选定的用户拥有对象，所以无法除去该用户的解决方法

Win8.1没有推送通知怎么办？Win8.1没有推送通知的解决方法

Win10 Mobile一周年更新正式版首批面向解锁版或者无锁版设备将推送

js日期、星座的级联显示代码

android 九宫格滑动解锁开机实例源码学习

怎么关闭获取Windows10图标 Win7/8取消Win10推送通知图文教程

C++的template模板中class与typename关键字的区别分析