首页 > html2canvas 如何生成高清图片?

html2canvas 如何生成高清图片?

如题,在手机上应用截图整个窗口生成canvas比较模糊,如何生成2倍尺寸的


屏幕宽度x手机屏幕分辨率
在用css把canvas的样式scale的分辨率缩小就好

function drawImage(opts) {

        if(!opts.canvas) {
            throw("A canvas is required");
        }

        // 获取canvas
        var canvas = opts.canvas,
            context = canvas.getContext('2d'),
            //image = opts.image,

        // 默认参数
            srcx = opts.srcx || 0,
            srcy = opts.srcy || 0,
            srcw = opts.srcw || image.naturalWidth,
            srch = opts.srch || image.naturalHeight,
            desx = opts.desx || srcx,
            desy = opts.desy || srcy,
            desw = opts.desw || srcw,
            desh = opts.desh || srch,
            auto = opts.auto,

        // 获取设备分辨率
            devicePixelRatio = window.devicePixelRatio || 1,
            backingStoreRatio = context.webkitBackingStorePixelRatio ||
                                context.mozBackingStorePixelRatio ||
                                context.msBackingStorePixelRatio ||
                                context.oBackingStorePixelRatio ||
                                context.backingStorePixelRatio || 1,

            ratio = devicePixelRatio / backingStoreRatio;

        // 判断canvas是否按照分辨率缩放
        if (typeof auto === 'undefined') {
            auto = true;
        }
        // upscale the canvas if the two ratios don't match
        if (auto && devicePixelRatio !== backingStoreRatio) {

            var oldWidth = canvas.width;
            var oldHeight = canvas.height;

            canvas.width = oldWidth * ratio;
            canvas.height = oldHeight * ratio;

            canvas.style.width = oldWidth + 'px';
            canvas.style.height = oldHeight + 'px';

            // now scale the context to counter
            // the fact that we've manually scaled
            // our canvas element
            context.scale(ratio, ratio);

        }

        context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
    }
【热门文章】
【热门文章】