canvas设置导出图片的大小

最新推荐文章于 2024-01-22 09:54:56 发布

叶知秋不喝茶

最新推荐文章于 2024-01-22 09:54:56 发布

阅读量5.2k

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/qq_40428678/article/details/104908190

版权

该博客探讨了如何利用HTML5的canvas元素来控制和调整导出图像的大小，详细阐述了在创建canvas画布及绘制内容后，如何设置导出图片的分辨率和尺寸，以满足不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
*@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