[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
// 还存在有问题的代码，问题在于processFile()中
// 问题：在ipone 5c 下，某些图片压缩处理后，上传到服务器生成的文件size为0，即是空白 ;define(['mod/tool/formSubmit'] ,function(o_formSubmit) { return { init: function(id) {
var self = this;
self.sniff(id);
var $img = '';
var $inputField = '';
},
sniff: function(id) {
var self = this;
if (window.File && window.FileReader && window.FormData) { $inputField = $('#' + id); $inputField.on('change', function (e) { var file = e.target.files[0];
if($('.c-img-wrap').length >= 9)
{
Hnb.ui.showError('不能上传超过9张图片' , 3000);
return ;
} if (file) {
//alert(file.type);
//if(!file.type) file.type='image/jpeg';
//if (/^image\//i.test(file.type)) {
if($("#id_img_list").parent().attr("scrollWidth") > $(window).width())
{
$("#id_img_list").parent().scrollLeft($("#id_img_list").parent().attr("scrollWidth") - $(window).width());
}
$img = $('<a class="bg c-img-wrap" href="javascript:void(null);"><i class="pa c-img-close"></i></a>').insertBefore($("#id_last_img_wrap")); self.readFile(file);
//} else {
// Hnb.ui.showError('请在浏览器中打开该页面上传图片' , 3000);
// $inputField.val('');
//}
} });
$inputField.val('');
} else {
Hnb.ui.showError("当前您的浏览器不支持图片上传，请选择其他的浏览器进行上传。" , 3000);
$inputField.val('');
}
}, readFile: function (file) {
var self = this;
var reader = new FileReader();
var head = '';
reader.onloadend = function () {
//reader.onload = function () {
head = reader.result.substr(0, 20);
alert('head:' + head);
alert('file_type:' + file.type);
self.processFile(reader.result, file.type);
} reader.onerror = function () {
Hnb.ui.showError('上传图片过程中发生了网络异常，请稍后重试。' , 3000);
} reader.readAsDataURL(file);
},
processFile: function (dataURL, fileType) { var self = this;
var maxWidth = 3120;
var maxHeight = 4208; var image = new Image();
image.src = dataURL; image.onload = function () {
var width = image.width;
var height = image.height;
var shouldResize = (width > maxWidth) || (height > maxHeight); if (!shouldResize) {
//self.submitFile(dataURL);
self.sendFile(dataURL , fileType);
return;
} var newWidth;
var newHeight; if (width > height) {
newHeight = height * (maxWidth / width);
newWidth = maxWidth;
} else {
newWidth = width * (maxHeight / height);
newHeight = maxHeight;
} var canvas = document.createElement('canvas'); canvas.width = newWidth;
canvas.height = newHeight; var context = canvas.getContext('2d'); context.drawImage(this, 0, 0, newWidth, newHeight); dataURL = canvas.toDataURL(fileType);
alert(dataURL.length);
//window.location = dataURL;
//self.sendFile(dataURL , fileType);
/*
var file = canvas.mozGetAsFile("foo.png");
var f = document.createElement("form");
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"file");
i.setAttribute('name',"upfile");
i.setAttribute('value' , dataURL);
f.appendChild(i);
*/
//$("#id_upfile").val(dataURL);
//document.forms[0].upfile.val = dataURL;
//window.location = dataURL; //var formData = new FormData(document.forms[0]);
//console.log(document.forms[0]);
//console.log(formData.get('upfile'));
//console.log(formData);
//return;
//formData.append('imageData', dataURL);
//formData.delete('upfile');
//console.log($inputField.files);
//formData.set('upfile', $inputField.files[0] , dataURL);
//self.submitFile($(f));
}; image.onerror = function () {
//alert('There was an error processing your file!');
Hnb.ui.showError('上传图片处理过程中发生了网络异常，请稍后重试。' , 3000);
};
},
submitFile: function(f) {
var self = this;
//console.log(f);
o_formSubmit.create(f , Hnb.WWW_CGI_URL + "/image/saveInCrossDomain").start().done(function(json_msg){
if(json_msg.state || !json_msg.data.real_url) {
Hnb.ui.showError("上传图片失败！" , 3000);
$img.remove();
} else { console.log(json_msg.data); $img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url);
//$img.html('<img src="' + json_msg.data.real_url + '" alt="帖子图片">');
$("#id_top_wrap").addClass("active");
//$img.html("");
}
}).fail(function(json_error){
$img.remove();
Hnb.ui.showError("您的网络有点慢，请稍后重试" , 3000);
}).always(function(){
$img.removeClass("bg");
self.isSubmitingImgNum--;
});
},
sendFile: function (fileData , fileType) { var formData = new FormData(); formData.append('imageData', fileData);
formData.append('imageType' , fileType); $.ajax({
type: 'POST',
timeout: 300000,
url: Hnb.WWW_CGI_URL + '/image/saveCndCompressImage',
data: formData,
contentType: false,
processData: false,
success: function (json_msg) {
//console.log('返回json数据' + json_msg);
var json_msg = $.parseJSON(json_msg);
if(!json_msg.state)
{
// 跨域请求处理
document.domain = 'hinabian.com';
// 可以将上传到线上的图片，追加到预览图位置
// ...
} else {
Hnb.ui.showError('您的网络有点慢，请稍后再上传。' , 3000);
}
},
error: function (json_msg) {
Hnb.ui.showError('上传图片发生了网络异常，请稍后重试。' , 3000);;
}
}).always(
function() {
$inputField.val("");
$img.removeClass("bg");
}
); }
}
});
// 修改后，可以正常使用的代码
;define(['mod/tool/formSubmit'] ,function(o_formSubmit) {
return {
init: function(id) {
var self = this;
self.sniff(id);
var $img = '';
var $inputField = '';
},
sniff: function(id) {
var self = this;
if (window.File && window.FileReader && window.FormData) {
$inputField = $('#' + id);
$inputField.on('change', function (e) {
var file = e.target.files[0];
if($('.c-img-wrap').length >= 9)
{
Hnb.ui.showError('不能上传超过9张图片' , 3000);
return ;
}
if (file) {
//if(!file.type) file.type='image/jpeg';
//if (/^image\//i.test(file.type)) {
if($("#id_img_list").parent().attr("scrollWidth") > $(window).width())
{
$("#id_img_list").parent().scrollLeft($("#id_img_list").parent().attr("scrollWidth") - $(window).width());
}
$img = $('<a class="bg c-img-wrap" href="javascript:void(null);"><i class="pa c-img-close"></i></a>').insertBefore($("#id_last_img_wrap"));
self.readFile(file);
}
});
} else {
Hnb.ui.showError("当前您的浏览器不支持图片上传，请选择其他的浏览器进行上传。", 3000);
//$inputField.val('');
}
$inputField.val('');
},
readFile: function (file) {
var self = this;
var reader = new FileReader();
var head = '';
reader.onloadend = function () {
//reader.onload = function () {
//head = reader.result.substr(0, 20);
self.processFile(reader.result, file.type);
}
reader.onerror = function () {
Hnb.ui.showError('上传图片过程中发生了网络异常，请稍后重试。', 3000);
return;
}
reader.readAsDataURL(file);
$inputField.val('');
},
processFile: function (dataURL, fileType) {
var self = this;
var unitSize = 480;
var image = new Image();
image.src = dataURL;
image.onload = function () {
var wFactor = image.width / unitSize;
var hFactor = image.height / unitSize;
var minFactor = Math.round(Math.min(wFactor, hFactor));
if (minFactor < 2) {
//self.submitFile(dataURL);
self.sendFile(dataURL, fileType);
return;
}
var newWidth = image.width / minFactor;
var newHeight = image.height / minFactor;
var canvas = document.createElement('canvas');
canvas.width = newWidth;
canvas.height = newHeight;
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0, newWidth, newHeight);
dataURL = canvas.toDataURL(fileType);
//window.location = dataURL;
self.sendFile(dataURL, fileType);
};
image.onerror = function () {
Hnb.ui.showError('上传图片处理过程中发生了网络异常，请稍后重试。' , 3000);
$inputField.val('');
};
},
submitFile: function(f) {
var self = this;
o_formSubmit.create(f , Hnb.WWW_CGI_URL + "/image/saveInCrossDomain").start().done(function(json_msg){
if(json_msg.state || !json_msg.data.real_url) {
Hnb.ui.showError("上传图片失败！" , 3000);
$img.remove();
} else {
$img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url);
//$img.html('<img src="' + json_msg.data.real_url + '" alt="帖子图片">');
$("#id_top_wrap").addClass("active");
//$img.html("");
}
}).fail(function(json_error){
$img.remove();
Hnb.ui.showError("您的网络有点慢，请稍后重试" , 3000);
}).always(function(){
$img.removeClass("bg");
self.isSubmitingImgNum--;
});
},
sendFile: function (fileData , fileType) {
var formData = new FormData();
formData.append('imageData', fileData);
formData.append('imageType' , fileType);
$.ajax({
type: 'POST',
timeout: 300000,
url: Hnb.WWW_CGI_URL + '/image/saveCndCompressImage',
data: formData,
contentType: false,
processData: false,
success: function (json_msg) {
var json_msg = $.parseJSON(json_msg);
if(!json_msg.state)
{
document.domain = 'hinabian.com';
$img.removeClass("bg").addClass("comBg").css("background-image" , "url(" + json_msg.data.real_url + ")").attr("hnb-src" , json_msg.data.real_url);
//$img.html('<img src="' + json_msg.data.real_url + '" alt="帖子图片">');
$("#id_top_wrap").addClass("active");
} else {
Hnb.ui.showError('您的网络有点慢，请稍后再上传。' , 3000);
}
},
error: function (json_msg) {
Hnb.ui.showError('上传图片发生了网络异常，请稍后重试。' , 3000);;
}
}).always(
function() {
$inputField.val("");
$img.removeClass("bg");
}
);
}
}
});
[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现的更多相关文章
- 前端JS利用canvas的drawImage()对图片进行压缩
对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...
- 基于canvas的前端图片压缩
/*common*/ /** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @retur ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- 利用canvas对上传图片进行上传前压缩
利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...
- 使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- Js利用Canvas实现图片压缩
最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- 使用canvas实现对图片的批量打码
最近有个需求,利用h5的canvas对图片一些涉及个人隐私的地方进行打码再上传,而且最好能实现批量打码.意思是在一张图片上对哪些地方做了打码,后续的所有图片都在同样的地方也可以自动打上码,不用人工一张 ...
- canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- Docker Dockerfile 定制镜像（转）
转自: https://yeasy.gitbooks.io/docker_practice/ 及 https://blog.csdn.net/wo18237095579/article/details ...
- 第八章 高级搜索树 (b1)B-树：动机
- 【校招面试 之 C/C++】第18题 C++ 中的隐式转换以及explicit关键字
1.什么是隐式转换: 众所周知,C++的基本类型中并非完全的对立,部分数据类型之间是可以进行隐式转换的. 所谓隐式转换,是指不需要用户干预,编译器私下进行的类型转换行为.很多时候用户可能都不知道进行了 ...
- jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
- js td innerHTML
用value不好使,用innerHTML可以.JS:document.getElementById("aa").innerHTML="单元格"; body:&l ...
- swift - VFL
1.VFL语法总结: //(1)“H”表示水平方向,“V”表示垂直方向 //(2)“|”表示父视图的边界 //(3)“[]”表示这是一个视图UIView的子类,可以组合多个条件,条件用"() ...
- iOS - OC - 字典快速遍历
1. [dic enumerateKeysAndObjectsUsingBlock:^(id _Nonnull key, id _Nonnull obj, BOOL * _Nonnull stop ...
- maven仓库的作用以及仓库的分类
maven的工作需要从仓库下载一些jar包,如下图所示,本地的项目A.项目B等都会通过maven软件从远程仓库(可以理解为互联网上的仓库)下载jar包并存在本地仓库,本地仓库 就是本地文件夹,当第二次 ...
- Thread（线程）和ThreadPool（线程池） Thread回调与返回值
Thread(线程) Thread开启线程:接收一个参数 TestClass tc = new TestClass(); //没有返回值,有一个object类型的参数的委托:两种写法. Paramet ...
- oracle查找特定表的引用
select * from user_source t where upper(t.TEXT) like upper('%table1%') 第二种方法类似于eclipse中的file search ...