挪动端Html5页面生成图片解决方案【html5教程】,移动端,Html5,生成图片

如今有许多微信民众号运营运动，都有生成图片的需求，这篇文章重要引见了挪动端Html5页面生成图片解决方案的相干材料，有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你们有所协助。

如今有许多微信民众号运营运动，都有生成图片的需求，生成图片后能够发送给挚友和发到朋侪圈散布，利于产物的宣扬！

1.生成图片能够用canvas,然则因为已经有了html2canvas这个开源库，所以为了节省时间就没有本身写了

github地点: html2canvas

少烦琐，先看东西！！！

LiveDemo

/**
     * 依据window.devicePixelRatio猎取像素比
     */
    function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }
    /**
     *  将传入值转为整数
     */
    function parseValue(value) {
        return parseInt(value, 10);
    };
    /**
     * 绘制canvas
     */
    async function drawCanvas (selector) {
        // 猎取想要转换的 DOM 节点
        const dom = document.querySelector(selector);
        const box = window.getComputedStyle(dom);
        // DOM 节点盘算后宽高
        const width = parseValue(box.width);
        const height = parseValue(box.height);
        // 猎取像素比
        const scaleBy = DPR();
        // 建立自定义 canvas 元素
        var canvas = document.createElement('canvas');
        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设定 canvas css宽高为 DOM 节点宽高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;

        // 猎取画笔
        const context = canvas.getContext('2d');

        // 将一切绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);

        let x = width;
        let y = height;
        return await html2canvas(dom, {canvas}).then(function () {
            convertCanvasToImage(canvas, x ,y)
        })
    }

    /**
     * 图片转base64花样
     */
    function convertCanvasToImage(canvas, x, y) {
        let image = new Image();
        let _container = document.getElementsByClassName('container')[0];
        let _body = document.getElementsByTagName('body')[0];
        image.width = x;
        image.height = y;
        image.src = canvas.toDataURL("image/png");
        _body.removeChild(_container);
        document.body.appendChild(image);
        return image;
    }
    drawCanvas('.container')

2.因为如今的手机都是高清屏，所以假如你不做处置惩罚就会涌现隐约的状况，为何会涌现隐约的状况？这个就涉及到装备像素比 devicePixelRatio js 供应了 window.devicePixelRatio 能够猎取装备像素比

function DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
            return window.devicePixelRatio;
        }
        return 1;
    }

这个DPR函数就是猎取装备的像素比, 那猎取像素比以后要做什么呢？

var canvas = document.createElement('canvas');
        // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 设定 canvas css宽高为 DOM 节点宽高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;

        // 猎取画笔
        const context = canvas.getContext('2d');

        // 将一切绘制内容放大像素比倍
        context.scale(scaleBy, scaleBy);

3.猎取装备像素比以后将canavs.width 和 canvas.height 去乘以装备像素比也就是 scaleBy; 这个时刻在去设置canvas.style.width 和 canvas.style.height 为dom的宽和高。想一想为何要这么写？末了在绘制的饿时刻将所绘制的内容放大像素比倍

举个例子iphone6S是装备宽高是375 X 667 ,6S的 window.devicePixelRatio = 物理像素 / dips（2=750/375）所以设想师平常给你的设想稿是否是都是750*1334的？所以假如根据一比一去绘制在高清屏下就会隐约，看图措辞6S DPR=2