모바일 H5 페이지는 이미지를 생성하는 코드를 구현합니다.

이 글의 내용은 모바일 H5 페이지에서 이미지를 생성하기 위한 코드입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 캔버스를 사용하여 이미지를 생성할 수 있지만 이미 오픈소스 라이브러리인 html2canvas가 있으므로 시간을 절약하기 위해 직접 작성하지는 않았습니다

    /**
     * 根据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 j는 장치 픽셀 비율을 얻기 위해 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를 설정합니다. 돔의 너비와 높이입니다. 생각해 보세요, 왜 이런 글을 쓰는 걸까요? 마지막으로 그릴 때 그려진 내용이 픽셀 비율로 확대됩니다

예를 들어 iPhone6S의 기기 너비와 높이는 375입니다. 여러분에게 제공되는 디자인 도안은 일반적으로 750*1334인가요?

그래서 고화질 화면에 1:1로 그리면 흐려지겠죠. 사진을 보고 6S DPR=2

6plus DPR=3

이라고 말해보세요. 4. 마지막으로 canvas.toDataURL("image/png")을 호출하고 image.src에 값을 할당합니다. WeChat에서는 사진을 저장할 수 없으므로 사진 파일을 생성하고 WeChat 자체 길게 누르기를 호출하여 사진을 앨범 기능에 저장할 수 있습니다. 그림과 같이:

관련 권장 사항:

html5 호 그리기를 위한 캔버스 코드 구현

html5 비디오 현재 재생 시간(코드)의 실시간 모니터링 구현 방법

html5 모바일 메타 설정

위 내용은 모바일 H5 페이지는 이미지를 생성하는 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!