canvas设置导出图片的大小

本是古典何须时尚 2023-07-15 11:28 24阅读 0赞

/**
    *@param {Object} obj {url: '图片地址(必填),width: '图片宽度(选填)', height: '图片高度(选**填)'}
    *@param {Function} callback 图片加载成功返回图片 
    */
    function getImg(obj, callback) {
            var canvasWidth = canvas.offsetWidth;        //当前canvas宽度
            var canvasHeight = canvas.offsetHeight;      //当前canvas高度
            var _canvas = document.createElement('canvas');
            _canvas.id = "drawImg";
            _canvas.style.display = 'none';
            document.body.appendChild(_canvas);
            var canvas2 = document.getElementById('drawImg');
            var ctx2 = canvas2.getContext('2d');
            var img = document.createElement('img');
    
            canvas2.width = obj.width || canvasWidth / 2;    // 默认是当前canvas的一般
            canvas2.height = obj.height || canvasHeight / 2;   
    
            if (!obj && !obj.url) {
                console.error('obj.url is undefined');
                return;
            }
    
            img.src = obj.url;
            img.id = 'drawImgContainer';
            img.style.display = 'none';
            document.body.appendChild(img);
    
            var _i = document.getElementById('drawImgContainer');
            //监听图片load事件，图片加载完成获取当前图片地址(base64格式)
            //不等图片加载完成获取图片会失败
            _i.addEventListener('load', function () {
                ctx2.drawImage(_i, 0, 0, canvas2.width, canvas2.height);
                document.body.removeChild(_i);
                callback(canvas2.toDataURL());
                document.body.removeChild(_canvas);
            })
        }

更多请看[我的博客][Link 1]

[Link 1]: https://blog.csdn.net/qq_40428678?t=1&orderby=ViewCount