正文

canvas压缩图片的大小(代码片段)

贝尔塔猫  贝尔塔猫  2022-11-13  335

关键词：

使用 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
,

前端js实现canvas压缩图片并上传(代码片段)

一.上传前压缩图片的好处可以减少用户的等待时间，提升使用体验，目前手机拍摄的图片文件大小一般在几M左右，文件直接上传时会有卡顿现象。可以减少服务端的存储空间。再次回去图片资源是也可以快速的加载... 查看详情

前端js实现canvas压缩图片并上传(代码片段)

canvas使用canvas压缩图片大小

...了一些面试，其中有一个面试题是这样的，使用canvas怎样压缩图片大小这道题给我问蒙了，因为我没用过canvas压缩图片回去查资料，发现手机端在上传图片的时候，调起相机拍照的时候超过2m了，所以用到canvas压缩，优化用户体... 查看详情

图片压缩传输(代码片段)

...，但现在手机相片动不动就是5,6兆，传输速度太慢，因此压缩一下。对图片压缩 1varcanvas=document.createElement("canvas");2varctx=canvas.getContext(‘2d‘);3//瓦片canvas4vartCanvas=document.createElement("canvas");5var 查看详情

微信小程序用canvastotempfilepath压缩图片，开发工具压缩正常而真机上比例失调(代码片段)

一.序言：上传图片时有些图片太大了，需要压缩质量大小再上传。下面展示压缩质量大小上传，也是我踩过得坑：开发工具上压缩正常而在真机上比例失调。主要是用wx.canvasToTempFilePath方法。我是要实现一个上传4... 查看详情

微信小程序用canvastotempfilepath压缩图片，开发工具压缩正常而真机上比例失调(代码片段)

微信小程序图片压缩

参考技术A微信小程序图片压缩有三种方法，一种是使用官方提供的接口wx.compressImage(Objectobject)；一种是通过压缩图片的大小，利用canvas重绘来得到压缩图片；最后一种安装第三方图片压缩包。由于第一种方法网上很多人说压缩... 查看详情

canvas图片压缩，局部放大，像素处理(代码片段)

直接上代码：（具体看注释）需要引用jquery.min.js<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equi 查看详情

图片压缩上传(代码片段)

图片压缩的方法//图片压缩compressImage(file,success,error)//图片小于1M不压缩//if(file.size<Math.pow(1024,2))//returnsuccess(file);//constname=file.name;//文件名constreader=newFileReader();reader.readAsDataURL(file);reader.onload=e=>constsrc=e.target.result;constimg=newImage... 查看详情

canvas获取图片中某个坐标的颜色(代码片段)

.../canvas-get-color/ 强大的canvas可以做很多事，包括手绘，压缩图片，图片滤镜，3D效果等等。本文仅用canvas 查看详情

canvas绘制折线图(仿echarts)(代码片段)

...字体线条模糊问题解决方案：放大canvas的大小，然后用css压缩回原大小，例如：想要900*400的画布，先将画布设置为width="1800px"height="800px"，再用csswidth:900px;height:400px;压缩。最终效果如下图：代码：1<!DOCTYPEhtml>2<htmllang="... 查看详情

微信小程序用canvastotempfilepath压缩图片，开发工具压缩正常而真机上比例失调(代码片段)

vue图片压缩上传(代码片段)

一、图片压缩图片压缩工具类最大高度和最大宽度都为500，如果超出大小将等比例缩放。注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。//将base64转换为blobco... 查看详情

vue图片压缩上传(代码片段)

canvas-缩放(代码片段)

Canvas-图片缩放由上一篇canvas-旋转的例子可以了解到canvas的一些特性，不熟悉的同学可以先去看看canvas-旋转。我们在将图片引入canvas时，图片会一原始像素渲染。这样往往不是我们想要的大小。这时就要用到canvas的scale(x,y)方法... 查看详情

前端js利用canvas的drawimage()对图片进行压缩

　　对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。　　这种体验包括两方面：　　1、由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络... 查看详情