/**
* nase64Data --> 要压缩的图片base64数据
* width --> 宽度
* height --> 高度
* _callback --> 回调函数
*/
function getCompressImage(base64Data, width, height, _callback) {
var oldimg = new Image();
oldimg.src = base64Data;
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
oldimg.onload = function() {
console.log('原始宽:' + oldimg.width + "原始高:" + oldimg.height);
// 绘制
context.drawImage(oldimg, 0, 0, width, height);
// 新的base64数据(压缩后的数据)
var newBase64 = canvas.toDataURL();
return _callback(newBase64);
}
}

利用 canvas 实现压缩图片的更多相关文章

  1. canvas前端压缩图片

    参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  2. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  3. [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

    // 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...

  4. canvas前端压缩图片和视频首屏缩略图并上传到服务器

    图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...

  5. 如何利用PHP语言压缩图片?PHP入门教程

    PHP可以控制缩略图清晰度和缩略图之后产生音量的产生.下面我们就来看看如何使用PHP优化我们的压缩图像.  PHP应用程序的开发往往涉及生成缩略图,使用PHP生成缩略图的过程本身并不难,但你知道PHP ...

  6. Android学习之利用BitmapFactory工厂压缩图片

    BufferedInputStream in = new BufferedInputStream( new FileInputStream(new File(path))); BitmapFactor ...

  7. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  8. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  9. 利用canvas对上传图片进行上传前压缩

    利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...

随机推荐

  1. centos7服务搭建常用服务配置之一:SSH

    目录 1 SSH服务协议 1.1 ssh服务协议说明 1.2 ssh服务工作机制 1.3 ssh加密技术说明 1.3.1 ssh实现安全链接建立,利用要是和锁头 1.3.2 ssh加密算法 1.4 s ...

  2. HTML5页面如何在手机端浏览器调用相机、相册功能

    最近在做一个公司的保险信息处理系统项目,开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file"/& ...

  3. centos7ping www.baidu.com没有ping通

    在linux中ping www.baidu.com 无法ping通,可能原因是DNS没配置好 1.修改vi /etc/resolv.conf 增加如下内容: nameserver 114.114.11 ...

  4. 2.3负载均衡:Ribbon

    基于上一篇文章的工程,启动eureka-server 工程:启动service-hi工程,它的端口为8765:将service-hi的配置文件的端口改为8763,并启动,这时你会发现:service- ...

  5. thinkphp5中的raw的作用

    模板中输出变量 默认不展示HTMl 使用raw将其中的中的HTMl内容展示出来 <div class="content"> <div class="co ...

  6. Python 【for/while循环】

    循环语句for...in..循环语句 1.空房间 #元素(item) 可以当成是一个变量 for i in [1,2,3,4,5]: #变量i是“空房间” print(i) #有一群数字在排队办业务, ...

  7. C++11 bind和function用法

    function是一个template,定义于头文件functional中.通过function<int(int, int)> 声明一个function类型,它是“接受两个int参数.返回 ...

  8. 01 Java 内存分配全面浅析

    http://blog.csdn.net/shimiso/article/details/8595564 Java 内存分配全面浅析  本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的 ...

  9. 初学java3 条件判断

    三目运算符 条件? 正确结果:错误结果 if判断 单一条件判断 if(条件){ }else{ } 多种条件判断 if(){ }else if(){ } ... else{ } switch判断 swi ...

  10. 1 bootstrapValidator使用

    1 如何使用 引入 <link href="bootstrapValidator.min.css" rel="stylesheet"> css文件 ...