canvas实现压缩图片的代码示例


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于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("渲染。。。。");

        }

    }

本篇文章到这里就已经全部结束了,更多精彩内容大家可以关注PHP中文网的HTML5视频教程栏目!!!

以上就是canvas实现压缩图片的代码示例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css技术是什么

javascript怎么删除表格行

10 个有用的javascript math对象方法(推荐)

css滚动条颜色怎么设置

css样式怎么写在jsp中

css可以去掉浮动吗?

css中的animation是什么

html怎么添加边框

html媒体(media)是什么

css外联样式不起作用怎么办

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...