/**
* 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. HNOI 2012/codevs 1994:排队

    题目描述 Description 某中学有n 名男同学,m 名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个 ...

  2. Reactor系列(二)Flux Mono创建

    Flux Mono创建 视频讲解:https://www.bilibili.com/video/av78844777/ FluxMonoTestCase.java package com.exampl ...

  3. [转帖]龙芯:Docker 配置与实践清单

    Docker 配置与实践清单 http://www.sohu.com/a/254904706_198222 文章对来官方文档及 Docker Links[1] 中链接内容进行归档整理,包含了日常工作中 ...

  4. TP5.1框架中的模型关联

    一对一关联 hasOne('关联模型','外键','主键'); 关联模型(必须):关联的模型名或者类名 外键:默认的外键规则是当前模型名(不含命名空间,下同)+_id ,例如user_id 主键:当前 ...

  5. IT 界的“名言”

    --喜欢记得关注我哟[shoshana]-- 中国有很多古代警世名言,朗朗上口,凝聚了很多故事与哲理.硅谷的互联网公司里头也有一些这样的名言,凝聚了很多公司价值观和做事的方法,对于很多程序员来说,其影 ...

  6. Web应用中访问WEB-INF下的资源

    WEB-INF目录是出于保护资源文件的目的,只能我们开发人员自己查看不可以通过URL直接访问的: 有时候我们也想直接访问WEB-INF中的资源,那就需要用到请求转发了(重定向redirect是不可以的 ...

  7. pycharm配置git版本管理

    1.下载并安装git 首先你电脑必须安装git版本控制器(软件),在官网下载即可 2.安装git,正常安装即可 编缉器的选择,根据电脑实际情况选择合适的编缉器 安装参考:https://www.cnb ...

  8. k-近邻(KNN) 算法预测签到位置

    分类算法-k近邻算法(KNN): 定义: 如果一个样本在特征空间中的k个最相似 (即特征空间中最邻近) 的样本中的大多数属于某一个类别,则该样本也属于这个类别 来源: KNN算法最早是由Cover和H ...

  9. python字典改变value值方法总结

    今天这篇文章中我们来了解一下python之中的字典,在这文章之中我会对python字典修改进行说明,以及举例说明如何修改python字典内的值.我们开始进入文章吧. 首先我们得知道什么是修改字典 修改 ...

  10. XML工具——xmlbeans的使用

    一.安装xmlbeans 1.下载xmlbeans 下载地址:https://gitee.com/shizuru/xmlbeans-2.6.0 2.解压,此处以解压至D盘根目录为例 3.配置环境变量( ...