js压缩图片base64长度

 1 var myCanvas=$(‘.img-container > img‘).cropper(‘getCroppedCanvas‘);
 2 (function (base64){
 3     var image = new Image(),newBase64,MAX_HEIGHT = 160;
 4     image.onload = function(){
 5         var canvas = document.getElementById("myCanvas");
 6         if(image.height > MAX_HEIGHT) {
 7             image.width *= MAX_HEIGHT / image.height;
 8             image.height = MAX_HEIGHT;
 9         }
10         var ctx = canvas.getContext("2d");
11         ctx.clearRect(0, 0, canvas.width, canvas.height);
12         canvas.width = image.width;
13         canvas.height = image.height;
14         ctx.drawImage(image, 0, 0, image.width, image.height);
15         newBase64=canvas.toDataURL(‘image/jpeg‘,0.4);      //上传base64编码
16         $.ajax({
17             type: "post",
18             url: ‘地址‘,
19             data: {
20
21             },
22             success: function (msg) {
23                42             },
43             error: function (msg) {
44                 tips.error(‘上传图片服务出错,请稍候再试。‘)
45             }
46         });
47         console.log(‘base64Size‘,newBase64.length/1024);50     };
51     image.src = base64;
52 })(myCanvas.toDataURL(‘image/jpeg‘));

js压缩图片base64长度,不适于与高质量图片;

通过原base64编码在canvas中绘制新图片,并取出canvas使用toDataUrl方法得到新的base64;

绘制图片时通过改变原图片大小和toDataUrl中参数控制图片质量

时间: 2024-08-22 01:27:05

js压缩图片base64长度的相关文章

js压缩上传图片base64长度

im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 canvas.toDataURL("image/jpeg", 1); 方法,

js压缩图片后再将base64转换为file文件亲测可用

<button id="upload">上传图片</button><input type="file" name="input_file" id="input_file" style="height: 84px; width: 111px;" /> var filechooser = document.getElementById("input_file&quo

js 压缩图片(只缩小体积,不更改图片尺寸)

1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" style="display: none;">

js 压缩图片 上传

感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/u011415782/article/details/79978608 大概的流程就是 点击file选择图片 js将图片解读出base64编码,然后通过js将base64编码转为压缩后的base64 然后通过ajax或者form把压缩后的base64编码提交到服务器(php) 然后php将base6

html5+js压缩图片上传

最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE HTML> <html lang="zh-C

js压缩图片上传

1.实现,自己看代码去 // 图片压缩 // 接收三个参数: // file:是读取的文件,需要input type="file"获取或者通过js获取 // rate:压缩比例:按照原来图片的百分比 // maxSize: 压缩后的最大文件 // rate有则使用rate,最大限制拦截,会判断rate后是否大于maxSize,如果大于,则剪切,不大于,这rate // fileType:返回内容的类型:file即压缩后的第一个参数,blob是blob文件,base64是base64文件

js压缩图片

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title> </head> <body>     <!-- 压缩时要用到的canvas -->     <canvas id="canvas" style="dis

js中图片base64格式转文件对象

通常我们使用裁剪工具裁剪图片后输出的格式为base64格式,而有时需要将图片转为源文件. 可用如下方法 function dataURLtoFile(dataurl, filename) {//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png) var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n =

使用 gulp 压缩图片

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin