[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 ...
随机推荐
- shell 一次移动很多个命名相似的文件
文件夹下面有很多类似下面命名的文件 aaaaaa01bbb aaaaaa01cc aaaaaa01dd aaaaaa02bbb aaaaaa02cc 要把 aaaaaa01 的文件移走 用 mv / ...
- 疯狂JAVA——第二章 理解面向对象
面向对象的三大特征:继承.封装和多态 面向对象的方式实际上由OOA(面向对象分析).OOD(面向对象设计)和OOP(面相对象编程)三个部分组成,其中OOA和OOD的结构需要用一个描述方式来描述并记录, ...
- ASP.NET使用ListView数据绑定控件和DataPager实现数据分页显示（二）
使用ListView控件进行修改,删除与添加操作1.页面代码: <asp:ListView ID="lv2" runat="server" onpagep ...
- 使用ASP.NET AJAX 从脚本中调用Web 服务的应用方法
技能点:通过编写WebService,在页面js中调用WebService来进行数据查询. 网站开发,有些时候需要使用js在页面动态生成一些内容,但还有些数据要通过查询数据库才能获取的. 但由于诸如主 ...
- Volley下载图片存放在data/data下 networkImageView lrucache
networkImageView 设置图片的方法 (有效) imageView.setImageUrl("https://www.baidu.com/img/bd_logo1.png&qu ...
- Spring框架的AOP的底层实现之JDK的动态代理（代码了解，理解原理）
1.创建接口UserDao: package com.huida.demo1; public interface UserDao { public void save(); public void u ...
- BZOJ 1345[BOI]序列问题 - 贪心 + 单调栈
题解 真的没有想到是单调栈啊. 回想起被单调栈支配的恐惧 最优情况一定是小的数去合并 尽量多的数,所以可以维护一个递减的单调栈. 如果加入的数比栈首小, 就直接推入栈. 如果加入的数大于等于栈首, 必 ...
- Java数据结构和算法（一）概念
Java数据结构和算法(一)概念 数据结构与算法目录(https://www.cnblogs.com/binarylei/p/10115867.html) 一.逻辑结构 数据之间的相互关系称为逻辑结构 ...
- 还在手工制作APP规范文档？这款设计神器你不容错过
之前写了一些关于APP原型文档的文章:一款APP的交互文档从撰写到交付 这次想写下关于APP设计规范文档的内容,规范文档这个东西,实际上大部分中小型公司没有这方面的需求,也没精力去制作这样一个系统性的 ...
- 2018.10.09 NOIP模拟 路途（递推+矩阵快速幂优化）
传送门 签到题.(考试的时候写挂爆0) 令AiA_iAi表示邻接矩阵的iii次幂. 于是就是求Al+Al+1+...+ArA_l+A_{l+1}+...+A_rAl+Al+1+...+Ar. ...