挪动端Html5网页页面转化成照片处理计划方案

日期:2021-01-19 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

如今有许多手机微信群众号经营主题活动,都有转化成照片的要求,转化成照片后能够推送给朋友和发到盆友圈外扩散,利于商品的宣传策划!

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)因此设计方案师1般给你的设计方案稿是否全是750*1334的?因此假如依照1比1去绘图在高清屏下就会模糊不清,看图讲话6S DPR=2

6plus DPR=3

4.最终启用canvas.toDataURL("image/png");取值给image.src,因为手机微信里边没法储存照片,因此只能转化成照片文档,启用手机微信自带的长按储存到照片到相册作用,如图:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:Html5网页页面2次共享的完成 返回下一篇:没有了