canvas 压缩图片的大小
使用 signature_pad canvas 库生成的图片太大。但又没有提供方法来压缩。
当然这是根据你canvas的画布大小决定的,某些原因导致我的画布就得是那么大。
随随便便一个图片转化为base64 之后就是200kb-300kb。所以得想办法压缩。
思路就是把生成的base64 图片再一次放入canvas 中 ,然后等比缩小4倍即可。
save () {
if (this.$refs.signature.isEmpty() === false) {
// https://github.com/WangShayne/vue-signature
var png = this.$refs.signature.save();
this.compressedPicture(png, _ => {
console.log(_);
})
}
},
compressedPicture (url, callback) {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
console.log(img.width);
var width = img.width;
var height = img.height;
// 按比例压缩4倍
var rate = (width < height ? width / height : height / width) / 4;
canvas.width = width * rate;
canvas.height = height * rate;
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
var dataURL = canvas.toDataURL('image/jpeg');
callback.call(this, dataURL);
canvas = null;
console.log(dataURL);
};
img.src = url
},
canvas 压缩图片的大小的更多相关文章
- js canvas压缩图片和jQuery ajax上传图片简单demo
原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...
- 利用canvas压缩图片
现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...
- vue上传图片 base64+canvas压缩图片
这是先将图片 base64转码 在拿canvas压缩的
- canvas压缩图片
1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...
- canvas压缩图片变模糊问题
canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...
- 使用canvas压缩图片 并上传
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用Canvas压缩图片
讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...
- js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
- js canvas压缩图片上传
$('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...
随机推荐
- Struts2的ActionError&ActionMessage示例
本教程显示使用Struts2的 ActionError 和 ActionMessage 类. 1. ActionError – 是用来发送错误信息反馈给用户 - 通过 <s:actionerro ...
- oracle linux 7.3 dtrace 安装
[root@localhost dtrace]# uname -r -.el7uek.x86_64 [root@localhost dtrace]# cat /etc/oracle-release O ...
- opencv CxImage 互转 (Mat)
//to Mat CxImage img; img.Load("C:\\f.jpg"); uint8_t* buf=NULL; int32_t len=0; bool rs =im ...
- VB--"." 和 "!" ?
在做学生信息管理系统的时候,遇到了一条代码. txtName.Text = mrc!student_Name txtResult.Text = mrc!result 代码本身理解没有问题,给文本框添加 ...
- 写的一个split函数
vector<string> strsplit(const string& str) { vector<string> vec; string sstr1=str, s ...
- HashCode的秘密
看String源码HashCode的计算方式: public int hashCode() {int h = hash;if (h == 0 && value.length > ...
- Fragment 生命周期 事务 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 微信-.NET调用JS-SDK
注意:1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.2. 如果发现在 Android 不能分享自定义内 ...
- HYSBZ 1012 最大数maxnumber
思路:在单调队列不更新列首.由于查询区间大小不确定,所以不能保证下次是否还用到它 #include <cstdio> #include <cstring> #include & ...
- 嵌入式 如何定位死循环或高CPU使用率(linux)
如何定位死循环或高CPU使用率(linux) 确定是CPU过高 使用top观察是否存在CPU使用率过高现象 找出线程 对CPU使用率过高的进程的所有线程进行排序 ps H -e -o pid,tid ...