导航

网站制作利用canvas实现压缩图片的代码示例

发布时间:2020-01-11 20:24:41 来源:「九州科技」值得信赖的互联网服务商
本篇文章给大家带来的内容是关于canvas实现压缩图片的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 对图片进行压缩

    function compress(imgPath) {

        var image = new Image();

        //新建一个img标签(还没嵌入DOM节点)

        image.src = imgPath;

        image.onload = function() {

            var canvas = document.createElement('canvas');

            var    context = canvas.getContext('2d');

            var    imageWidth = image.width / 3;

                //压缩后图片的大小

            var    imageHeight = image.height / 3;

            var data = '';

            canvas.width = imageWidth;

            canvas.height = imageHeight;

            context.drawImage(image, 0, 0, imageWidth, imageHeight);

            data = canvas.toDataURL('image/jpeg')

            //压缩完成

            $(".srcDiscernImg").attr("src", data);

            console.log("渲染。。。。");

        }

    }

以上就是canvas实现压缩图片的代码示例的详细内容,更多请关注武汉九州科技其它相关文章!

最新资讯
相关推荐
服务项目
微信客服
180-7107-7883
地址:湖北省武汉市解放大道航天双城6栋25层
E-mail:125435440@QQ.com
备案号:鄂ICP备13002765号-6    鄂公网安备 42010202000700号    网站地图
九州科技,您身边的互联网应用方案提供商-高端网站建设-网站制作-网站开发-网页设计-微信开发-小程序开发
高端网站建设 公众号开发 小程序制作 网站seo优化 H5活动营销 互联网产品

18071077883

提交需求