使用 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 压缩图片的大小的更多相关文章

  1. js canvas压缩图片和jQuery ajax上传图片简单demo

    原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...

  2. 利用canvas压缩图片

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

  3. vue上传图片 base64+canvas压缩图片

    这是先将图片 base64转码 在拿canvas压缩的

  4. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  5. canvas压缩图片变模糊问题

    canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...

  6. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 使用Canvas压缩图片

    讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩. 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法 ...

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

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

  9. js canvas压缩图片上传

    $('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...

随机推荐

  1. Struts2的ActionError&ActionMessage示例

    本教程显示使用Struts2的 ActionError 和 ActionMessage 类. 1. ActionError – 是用来发送错误信息反馈给用户 - 通过 <s:actionerro ...

  2. oracle linux 7.3 dtrace 安装

    [root@localhost dtrace]# uname -r -.el7uek.x86_64 [root@localhost dtrace]# cat /etc/oracle-release O ...

  3. opencv CxImage 互转 (Mat)

    //to Mat CxImage img; img.Load("C:\\f.jpg"); uint8_t* buf=NULL; int32_t len=0; bool rs =im ...

  4. VB--"." 和 "!" ?

    在做学生信息管理系统的时候,遇到了一条代码. txtName.Text = mrc!student_Name txtResult.Text = mrc!result 代码本身理解没有问题,给文本框添加 ...

  5. 写的一个split函数

    vector<string> strsplit(const string& str) { vector<string> vec; string sstr1=str, s ...

  6. HashCode的秘密

    看String源码HashCode的计算方式: public int hashCode() {int h = hash;if (h == 0 && value.length > ...

  7. Fragment 生命周期 事务 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. 微信-.NET调用JS-SDK

    注意:1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.2. 如果发现在 Android 不能分享自定义内 ...

  9. HYSBZ 1012 最大数maxnumber

    思路:在单调队列不更新列首.由于查询区间大小不确定,所以不能保证下次是否还用到它 #include <cstdio> #include <cstring> #include & ...

  10. 嵌入式 如何定位死循环或高CPU使用率(linux)

    如何定位死循环或高CPU使用率(linux)  确定是CPU过高 使用top观察是否存在CPU使用率过高现象 找出线程 对CPU使用率过高的进程的所有线程进行排序 ps H -e -o pid,tid ...