JavaScript之移动端H5生成图片解决方案讲解

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

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

6plus DPR=3

4.

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

到此这篇关于JavaScript之移动端H5生成图片解决方案讲解的文章就介绍到这了,更多相关JavaScript之移动端H5生成图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js通过canvas生成图片缩略图(canvas)

    现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片,专业术语也就是生成缩略图,而对于生成缩略图一般做法是通过后端语言php等来生成,但是为了给服务器减压,我们或许可以从前端来着手,先生成好不同尺寸的缩略图,传给后端,而后端只需要将前端传过来的图片进行存储就好了. 使用Canvas我们可以轻松生成各种尺寸的图片,具体实现如下: function resizeImage(src,callback,w,h){ var canvas = document.createElement("can

  • Java利用Phantomjs实现生成图片的功能

    今天,给大家分享一个Java后端利用Phantomjs实现生成图片的功能,同学们使用的时候,可以参考下! PhantomJS简介 首先,什么是PhantomJS? 根据官网介绍: PhantomJS is a command-line tool. -- 其实就是一个命令行工具. PhantomJS的下载地址: Windows:phantomjs-2.1.1-windows.zip Linux:phantomjs-2.1.1-linux-x86_64.tar.bz2;phantomjs-2.1.1

  • Nodejs中使用captchapng模块生成图片验证码

    Nodejs项目,在做图片验证码的时候遇到了难题.Nodejs没有图片库,以后会有,但是现在没有. 网络上搜索一圈,有几个解决方案: 1.采用第三方验证码程序,有的时候,项目可能不允许: 2.使用Java或者PHP生成图片,Nodejs调用,中间采用Redies共享: 这两种方式都不太理想,好在终于找到了可以支持Nodejs图片验证码的一个库,虽然只支持数字,但是也还不错.原理是使用Base64的图片编码方式. 这个库的Gighub地址是:https://github.com/GeorgeCha

  • js 将canvas生成图片保存,或直接保存一张图片的实现方法

    将canvas数组保存 function downLoadImage(canvas,name) { var a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = name; a.click(); } canvas:传入canvas的dom对象 name:保存的图片的名字 直接将图片保存的方法 function downLoadImage(img,name) { var a = documen

  • 基于linnux+phantomjs实现生成图片格式的网页快照

    安装扩展:   (1)下面是我在linux上的安装过程,如果没有安装git请先yum install git     安装casperjs 复制代码 代码如下: cd /     git clone git://github.com/n1k0/casperjs.git     cd casperjs     ln -sf /casperjs/bin/casperjs /usr/local/bin/casperjs  //可以忽略 实际执行中php是执行 /casperjs/bin/casperj

  • JSP开发之生成图片验证码技术的详解

    JSP开发之生成图片验证码技术的详解

    JSP开发之生成图片验证码技术的详解 我们在网页注册用户时,常常会需要格根据图片给的图片验证码把验证码输进去.那么我们今天就来学习这个. 简单来说分为三步骤: 1.底层用Java实现生成验证码图片 2.通过配置文件调用实现Java生成片 3.通过HTML技术把图片显示到网页 首先是最底层Java生成图片代码 package cn.hncu.servlets; import java.awt.Color; import java.awt.Font; import java.awt.Graphics

  • 原生js生成图片验证码

    本文实例为大家分享了js生成图片验证码的具体代码,供大家参考,具体内容如下 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" style="width: 200px;hei

  • Node.JS用纯JavaScript生成图片或滑块式验证码功能

    有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片.跨平台部署不是很方便.这里介绍几个用纯JS实现的图片验证码生成模块. captchapng 用纯JavaScript实现的验证码生成模块. https://github.com/GeorgeChan/captchapng 安装简单,依赖少: npm install captchapng 示例: var captchapng = require('captchapng'); app.get('/si

  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %> <%@ taglib http://struts.apache.org/tags-bean">ht

  • JavaScript之移动端H5生成图片解决方案讲解

    现在有很多微信公众号运营活动,都有生成图片的需求,生成图片后可以发送给好友和发到朋友圈扩散,利于产品的宣传! 1. 生成图片可以用canvas,但是由于已经有了html2canvas这个开源库,所以为了节省时间就没有自己写了 github地址: html2canvas LiveDemo /** * 根据window.devicePixelRatio获取像素比 */ function DPR() { if (window.devicePixelRatio && window.devicePi

  • js 简易版滚动条实例(适用于移动端H5开发)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte

  • 移动端H5开发 Turn.js实现很棒的翻书效果

    移动端H5开发 Turn.js实现很棒的翻书效果

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用 fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想,后来想起自己曾经做过PC版的翻书效果,当时使用的是Turn.js,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! Turn.js的官方网址: http://www.tur

  • 详解搭建一个vue-cli的移动端H5开发模板

    简介 vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发. 技术栈:vue + vux + axios + less 源码地址:https://github.com/Michael-lzg/vue-mobile 功能 搭建项目目录 配置 css 预处理器 配置 UI 组件库 vux 解决移动端适配 配置页面路由缓存 axios 请求封装 工具类函数封装 toast 组件封装 dialog 组件封装 底部导航组件封装 列

  • JavaScript实现网页端播放摄像头实时画面

    目录 初衷 应对的场景 涉及到的范围 解决问题的思路 摄像头的Rtsp地址 ffmpeg下载,安装,配置环境变量 nodejs和Express JSMpeg播放和请求打开关闭 初衷 写这篇博客已经是项目过去很久了,之所以写是因为当时被这个问题为难了很久.我原本是做后端的,涉及到前端的东西,当时是两眼一黑.好在最后还是解决了.当相信这个内容还是有价值的,所以今天整理出来,帮助未来可能需求的人. 应对的场景 希望在自己的Web应用中播放局域网(不能上云),或是广域网的摄像头实时画面. 涉及到的范围

  • JavaScript前端迭代器Iterator与生成器Generator讲解

    目录 Iterator 概念 默认 Iterator 接口 Iterator 的 return() 原生具备 Iterator 接口的数据结构 调用 Iterator 接口的场合 模拟实现 for of Generator 认识 Generator next 方法的参数 yield 表达式 Generator 与 Iterator 之间的关系 Generator.prototype.return() yield* 表达式 Generator 函数的 this Generator 实现一个状态机

  • JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候的想法是如果给file表单加了 multiple 属性就没有办法调用手机的摄像头拍照了,如果不加,就无法同时选择多张图片,于是我就照实跟同事说了这个情况.但回头一想,单张图片可以上传,那多张图片呢?于是就有了本文的内容. HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文

  • 基于HTML模板和JSON数据的JavaScript交互(移动端)

    写本文之前,我正在做一个基于Tab页的订单中心: 每点击一个TAB标签,会请求对应状态的订单列表.之前的项目,我会在js里使用 + 连接符连接多个html内容: var html = ''; html += '<div class="empty-list">' + '<div class="icon icon-box"></div>'+ '<div>还没有订单</div>'+ '</div>';

  • JS动态计算移动端rem的解决方案

    在做移动端web app的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过CSS3的media query来实现适配,例如下面这样: html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

随机推荐