[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现...
2024-05-29 11:41:38
// 还存在有问题的代码，问题在于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, texti.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");});}}
});
转载于:https://www.cnblogs.com/shuman/p/4955630.html
[H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现...相关推荐
- vue下利用canvas实现在线图片标注
web端实现在线图片标注在此做下记录,功能类似微信截图时的标注,包含画线.框.箭头和文字输入,思路是利用canvas画布,先把要标注的图片使用drawImage方法画在画布上,然后定义画线.框.箭头和 ...
- 使用FileReader + canvas.toDataURL() 实现图片压缩
主要借助FileReader读取文件.canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩. <template><div>< ...
- 图片压缩软件_简单易用的图片压缩软件gt;给图片减肥
正文共816字,预计阅读时间为:3分钟 无论你是设计师 自媒体.办公编辑人员 还是学生 很多时候都会遇到 图片文件体积太大 导致无法上传 或传输太过耗时耗流量的问题 这时我们就需要 一款免费图片压缩工 ...
- 微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果 上代码 <style&g ...
- vue 中利用canvas 给pdf文件加水印---详细教程（附上完整代码）
需求:在h5网页中打开pdf文件,要求给文件添加水印 实现技术及插件:vue,vue-pdf,canvas 插件安装: npm i vue-pdf --save npm i pdf-lib --sav ...
- 利用H5Canvas进行前端图片压缩再上传笔记
前端代码如下: //---------------------压缩图片上传插件--------------------------- var ImgFileGet_class = function(m ...
- 利用canvas对图片进行等比例压缩
<script>var input = document.querySelector("input");var imgArr=[];input.addEventList ...
- 【机器学习线性代数】17 利用SVD进行彩色图片压缩
这一节,我们再来介绍一个奇异值分解的实际案例:即如何基于SVD的主成分分析方法,来对一张彩色图像进行压缩处理. 1.图像的数据表示 很明显,如果要对一张图像进行压缩,首先我们得知道应该如何用数据的形式 ...
- 小程序canvas生成海报图片压缩和失真问题解决
微信小程序实现canvas按照原图等比例不失真绘制海报图,防止模糊 我这里的场景是收款二维码+收款背景图. 绘制二维码 我这里绘制二维码使用的 wxapp-qrcode ,也可以使用weapp-qrc ...
- 利用css做出的图片墙效果_练习
效果: 鼠标触碰时: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
最新文章
- 判断多边形边界曲线顺/逆时针
- a超链接之返回顶部的两种实现方法
- 给ApplicationContext容器中添加组件的方法（@Bean的使用）
- CentOS 6.6源码编译升级GCC至4.8.2
- protected的继承方式有什么特点_酿酒：大曲酒有哪些配料方式？有什么特点？
- 初学者C语言输入输出挖坑填补处须知
- Linux下修复U盘坏块,快速修复U盘坏块的方法
- java docx4j 目录_使用Docx4j创建word文档
- Programer Cat 福利
- COMSOL吸附模拟
- 从排名看主流半导体厂商在3G市场的策略与心态
- Oauth2 存储 token 到Redis 报错：READONLY You can‘t write against a read only slave
- 人工智能在脑神经科学的应用创新与热点——脑机接口
- 【3】天猫精灵开放实验平台实验— 切换意图，参数传递
- 对百万级txt文件的数据，进行查重处理
- linux 中输入bash,Linux上Bash Shell编程
- QT发生crashed
- CSDN学院免费课程领取教程
- Egret中使用TiledMap
- 模电学习笔记（上交郑老师）12.派生电路和场效应管放大电路
热门文章
- 清华大学操作系统OS学习（九）——页面置环算法：最优算法、先进先出算法(FIFO)、最近最久未使用算法(LRU)、 CLOCK法、最不常用算法（LFU） 、工作集置换算法、缺页率置环算法
- 5、maplotlib中的轴刻度和轴线
- python的sorted用法
- windows10下搭建spark平台
- windows查看8080端口并杀死进程
- php 数组 判断可以吗,php判断一个数组是否为有序
- C++ multimap 用法总结 例子
- FISCO BCOS Failed to connect to nodes: [ ssl hanshake failed:/192.168.64.131:20200]
- kubernetes视频教程笔记 （36）-部署 prometheus granfana
- 将Excel数据批量导入到数据库(项目案例)