移动端Html5页面生成图片解决方案


Posted in HTML / CSS onAugust 07, 2018

现在有很多微信公众号运营活动,都有生成图片的需求,生成图片后可以发送给好友和发到朋友圈扩散,利于产品的宣传!

1.生成图片可以用canvas,但是由于已经有了html2canvas这个开源库,所以为了节省时间就没有自己写了

github地址: html2canvas

少??拢?瓤炊?鳎。。?/p>

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

移动端Html5页面生成图片解决方案

6plus DPR=3

移动端Html5页面生成图片解决方案

4.最后调用canvas.toDataURL("image/png");赋值给image.src,由于微信里面无法保存图片,所以只能生成图片文件,调用微信自带的长按保存到图片到相册功能,如图:

移动端Html5页面生成图片解决方案

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 #HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 #HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 #HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
客户端静态页面玩分页
2006/06/26 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Python常见异常分类与处理方法
2017/06/04 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
python语言基本语句用法总结
2019/06/11 Python
Django model update的多种用法介绍
2020/03/28 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
二手房买卖协议书
2014/04/10 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
tree shaking对打包体积优化及作用
2022/07/07 Java/Android
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers