利用 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 ...
随机推荐
- poj1696(极角排序,贪心)
---恢复内容开始--- 题目链接:https://vjudge.net/problem/POJ-1696 题意:有n个点,规定起点,每次只能向左走,不能与之前的路径交叉,求最多能经过几个点. 思路: ...
- 补码一位乘法 Booth算法 Java简易实现
本文链接:https://www.cnblogs.com/xiaohu12138/p/11955619.html. 转载,请说明出处. 本程序为简易实现补码一位乘法,若代码中存在错误,可指出,本人会不 ...
- (七)mybatis 的输入映射与输出映射
目录 前言 输入映射 - - 传递 pojo 包装类型 (复杂查询 ) 输出映射 - - resultType 输出映射 - - resultMap 前言 通过 paramterType 指定输入参数 ...
- python3启航
Python3的基本数据类型 数字 int ,所有功能都放在int里 a1 = 123 a2 = 456 ##int 将字符串转换为数字 a = "123" print(tyep( ...
- Java手写简单Linkedlist一(包括增加,插入,查找,toString,remove功能)
@Java300 学习总结 一.自定义节点 LinkList底层为双向链表.特点为查询效率低,但增删效率高,线程不安全. 链表数据储存在节点,且每个节点有指向上个和下个节点的指针. 创建ggLinke ...
- Graphite简要教程
转载自DevOps实战:Graphite监控上手指南 英文原文Getting Started with Monitoring using Graphite 英文原文Google快照 作者 Frankl ...
- 怎样在浏览器端增加一条Cookie
可以使用 document.cookie, 这个属性可读可写, 读时是读取所有没有设置HttpOnly的cookie作为一个字符串返回, 写时是将一个cookie写入到document.cookie中 ...
- 怎样指定当前cookie不能通过js脚本获取
所谓" 不能通过js脚本获取 " 主要指的是: 使用document.cookie / XMLHttpRequest对象 / Request API 等无法获取到当前cookie. ...
- hdu 1113 简单字符处理问题
#include <map> #include <cstdio> #include <iostream> #include <string> #incl ...
- winfrom_权限设置_TreeView的相关问题
1.获取TreeView的值: 循环TreeView,获取checked每个节点的Text,串起来用逗号“,”隔开,保存到数据库. List<string> list = new List ...