【代码】canvas实现图片等比例缩放

2020-10-29 09:42:53  阅读 1327 次 评论 0 条

最近公司项目一个需求,做海报,图片肯定是要缩放的啦,还不能变形

嗯,就酱,贴出代码吧(●´∀`)ノ♡

逻辑代码

//等比例缩放图片
        function changeWidth(imgs, x) {
            var img = new Image()
            img.setAttribute("crossOrigin", 'Anonymous');//解决跨域问题
            img.onload = function () {
                var canvas = document.getElementById("tmpCanvas");
                var ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布,重新画
                var imgwidth = img.width;
                var imgheight = img.height;
                console.log(imgwidth + " " + imgheight);
                //得到图片的高宽比,用以计算canvas的高
                var scale = imgheight / imgwidth;
                var cheight = x * scale;
               
                ctx.drawImage(img, 0, 0, x, cheight);

                var image = canvas.toDataURL("image/jpg");//这里返回base64

                console.log("====等比例缩放完成====");
                console.log(image);
                console.log("======================");
                
            }
            img.src = imgs;


        }

调用

changeWidth("https://www.yangguangdream.com/zb_users/upload/xcx.jpg", 100);



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2108
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?