利用 canvas 实现压缩图片
/**
* 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 实现压缩图片的更多相关文章
- canvas前端压缩图片
参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
// 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...
- canvas前端压缩图片和视频首屏缩略图并上传到服务器
图片: var img = document.createElement('img') img.src = window.URL.createObjectURL(fileObj.file) // 加载 ...
- 如何利用PHP语言压缩图片?PHP入门教程
PHP可以控制缩略图清晰度和缩略图之后产生音量的产生.下面我们就来看看如何使用PHP优化我们的压缩图像. PHP应用程序的开发往往涉及生成缩略图,使用PHP生成缩略图的过程本身并不难,但你知道PHP ...
- Android学习之利用BitmapFactory工厂压缩图片
BufferedInputStream in = new BufferedInputStream( new FileInputStream(new File(path))); BitmapFactor ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
- 利用canvas对上传图片进行上传前压缩
利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...
随机推荐
- sqlmap(网站数据库注入)
*教程 http://www.nxadmin.com/tools/1241.html 一.ASP网站 1. sqlmap -u “http://www.czypjx.com/News_show.asp ...
- [LuoguP2164][SHOI2007]交通网络_拓扑排序_概率期望
交通网络 题目链接:https://www.luogu.org/problemnew/solution/P2164 数据范围:略. 题解: 直接算不好算,我们考虑建反图然后$Toposort$. 这样 ...
- [转帖]localectl
localectl http://linux.51yip.com/search/localectl localectl 命令简介. 相关命令:暂无相关命令 localectl — 控制系统的本地化与键 ...
- java学习(东软睿道)2019-09-06(预课)《随堂笔记》
2019-09-06 13:19:56 1.变量:java 名称 2.服务器server 客户端client uft8 ascll 3.Java ...
- javaweb项目的全局监听配置
在项目中有时候会遇到全局监听的需求,而全局性的监听该如何配置,代码如下: package com.demo.listener; import javax.servlet.ServletContextE ...
- S02_CH15_ AXI_OLED 实验
S02_CH15_ AXI_OLED 实验 在上一个例子中,主要是以软件功能为主,采用了软件模拟SPI时序进行控制OLED.这样做的好处是灵活,但是牺牲了效率.本章采用的方式是让SPI驱动由Veril ...
- hdu 2767 强连通缩点处理加边问题
#include <cstring> #include <cstdlib> #include <cstdio> 缩点的好处就是可以将乱七八糟的有向图 转化为无环的有 ...
- Google开源项目风格指南
Google开源项目风格指南 来源 https://github.com/zh-google-styleguide/zh-google-styleguide Google 开源项目风格指南 (中文版) ...
- React的性能优化
1. 在constructor中绑定事件函数的this指向 把一个函数赋值给一个变量,然后用那个变量去执行函数会造成this的丢失,所以需要绑定this,把绑定放在构造函数中可以保证只绑定一次函数,如 ...
- property配置
之前把设备历史数据存储的时间周期存储在了数据库中,因为以下一些原因,我打算改写到property配置文件中 1.这个周期时间的配置没有单独放一个tabel中,导致现在设备类型越来越多,每次添加或者修改 ...