1、使用html2canvas
存在的问题：
不同的机型绘制位置不同的问题。
这个主要因为Html动态设置了html的dpr。（dpr可以解决屏幕显示不了1pxborder和无法显示小于12px的文字的问题）。
但是在绘制canvas时最好屏蔽这个属性。这个属性确定会导致html2canvas生成的canvas的尺寸不同。导致重新在此canvas里绘制图片时，在不同机型上显示的位置有出入。
使用canvas时一定要注意toDataUrl的跨域问题
 
2、点击保存图片
目前只有H5的，download方法。但是在手机上通用性不强。
只有和客户端交互的方式来保存图片。
 
3、生成2维码图片(qr_code)
4、长按保存图片（直接生成图片覆盖在Html，浏览器会自动弹出是否保存图片）

前端使用html2canvas截图，在canvas上绘制图片及保存图片的更多相关文章

  1. Canvas上绘制几何图形

    重要的类自定义View组件要重写View组件的onDraw(Canvase)方法,接下来是在该 Canvas上绘制大量的几何图形,点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形,等各种形状 ...

  2. 软件项目技术点(7)——在canvas上绘制自定义图形

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 图形种类 目前我们软件可以绘制出来的形状有如下这几种,作为开发者我们一直想支持用户可以拖拽的类似word里面图形库,但目前还没有找到比 ...

  3. iOS：quartz2D绘图（在PDF文件上绘制图片）

    quartz2D还可以在PDF文件上绘制图片,它有自己的PDF Graphics Context上下文,通过UIGraphicsBeginPDFContextToFile方法开始上下文后就可以绘制图片 ...

  4. 在canvas上面绘制图片--drawImage实例

    在canvas上面绘制图片--drawImage实例 关键点: 1.图片居中 2.其它 <!DOCTYPE html> <html lang="zh-cn"> ...

  5. 在<canvas>上绘制img（drawImage()）时需要注意的事

    <canvas>标签相当于是一个画布,css决定画布的样式(这块画布的背景颜色.大小等),脚本(一般使用JavaScript)就是画笔,我们可以在这个画布上绘制线条.形状.文字.图片等. ...

  6. Android 如何将Canvas上绘制的内容保存成本地图片（转）

    效果如下图所示 保存在sd卡上的文件为 手机上显示效果为: 1>>在Manifest文件中增加相应权限 <!-- 在SDCard中创建与删除文件权限 --> <uses- ...

  7. （转）第03节：在Canvas上插入图片并设置旋转属性

    我们已经学会了在Canvas上画简单的图形,这节我们就在Canvas上加一张图片.用到fabric.Image对象把图片添加到Canvas上. HTML文件:为了效果更好看我在html里写了一些CSS ...

  8. 软件项目技术点(5)——在canvas上绘制动态网格线

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 grid类的实现 当鼠标在画布上缩放时,网格能跟着我的鼠标滚动而相应的有放大缩小的效果. 下面是具体实现的代码,draw函数里计算出大 ...

  9. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

随机推荐

  1. Qt计算两个时间差

    QTime startTime = QTime::currentTime(); QThread::msleep(SLEEP_TIME_MILL); QTime stopTime = QTime::cu ...

  2. 教你在Ubuntu上体验Mac风格

    导读 老实说,我是个狂热的 Ubuntu 迷,我喜欢 Ubuntu 默认的 Unity 主题样式外观.此外,还有很多关于 Ubuntu 14.04 的漂亮图标主题样式 可用来美化默认的外观.但正如我上 ...

  3. 【BZOJ4606】[Apio2008]DNA DP

    [BZOJ4606][Apio2008]DNA Description 分析如DNA序列这样的生命科学数据是计算机的一个有趣应用.从生物学的角度上说,DNA 是一种由腺嘌呤.胞嘧啶.鸟嘌呤和胸腺嘧啶这 ...

  4. 基于注解的形式配置Bean

    基于注解的方式配置Bean:也就说我们在每个Bean的类名前面注解一下,Spring会自动帮我们扫描Bean放进IOC容器中 I基于注解的方式配置Bean(没有依赖关系的Bean)有两个步骤: 1组件 ...

  5. FZU Moon Game(几何)

    Accept: 710    Submit: 2038 Time Limit: 1000 mSec    Memory Limit : 32768 KB  Problem Description Fa ...

  6. 使用 MySQL 管理层次结构的数据

    概述 我们知道,关系数据库的表更适合扁平的列表,而不是像 XML 那样可以直管的保存具有父子关系的层次结构数据. 首先定义一下我们讨论的层次结构,是这样的一组数据,每个条目只能有一个父条目,可以有零个 ...

  7. Spring Data CrudRepository增删改查方法（八）

    CrudRepository   的主要方法 long count(); boolean exists(Integer arg0); <S extends StudentPO> S sav ...

  8. Yii框架2.0的模块

    模块是个独立的软件单元,也是又控制器,视图,模型组成的,也可以有自己的布局.但他必须属于某个应用下,不能独立存在. 其中模块的控制器,视图和应用的控制器和视图使用基本相同,不作赘述,下面说说模块的使用 ...

  9. go学习笔记二：运行使用命令行参数

    本文只作为博主的go语言学习笔记. 对命令行参数的解析,只是在运行时使用的,比如以下命令:go run gomain -conf conf.toml 没有办法再go build时使用. 一.运行时命令 ...

  10. python自然语言处理——学习笔记：Chapter3纠错

    2017-12-06更新:很多代码执行结果与书中不一致,是因为python的版本不一致.如果发现有问题,可以参考英文版: http://www.nltk.org/book/ 第三章,P87有一段处理h ...