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. 问道游戏-寻路CALL心得

    寻路CALL查找几种方法 第一种 bp send 在小地图上点击重点.看看是否断下 断下这是最简单的 第二种 查找用户当前坐标内存地址下写入断点 通过堆栈追溯 运气好也可以找到 第三种 查找终点坐标地 ...

  2. poj_3259 负权和环

    题目大意 N个点,M条双向路径,W条单向路径.从双向路径的一端到另一端所花费时间为正值,从单向路径的源点到终点所花时间为负值.问是否存在一条从A出发,再回到A的回路,满足回到A的时间小于出发时间. 题 ...

  3. Android软键盘的隐藏显示研究

    http://winuxxan.blog.51cto.com/2779763/522810 全局推: android:windowSoftInputMode="adjustResize&qu ...

  4. java中Logger.getLogger(Test.class)，即log4日志的使用

    log4的使用方法: log4是具有日志记录功能,主要通过一个配置文件来对程序进行监测有两种配置方式:一种程序配置,一种文件配置有三个主要单元要了解,Logger,appender,layout. l ...

  5. vue 阻止表单默认的提交事件

    form <form autocomplete="off" @submit.prevent="onSubmit"> <input type=& ...

  6. 启动phpstyle Apache的80端口被win7的System PID=4的进程占用的解决方法 以及 如何在phpStyle里发布程序

    学习前端是,用到Ajax,php语言,操作mysql数据库,浏览器无法解析php代码(把源码输出):原因,我之前用的是tomcat服务器写jsp,servlet,php用的是apache服务器,没有配 ...

  7. Abp Uow 设计

    初始化入口 在AbpKernelModule类中,通过UnitOfWorkRegistrar.Initialize(IocManager) 方法去初始化 /// <summary> /// ...

  8. node jar sh

    https://nodejs.org/api/child_process.html Node.js v11.1.0 Documentation Index View on single page Vi ...

  9. Python爬虫实例（二）使用selenium抓取斗鱼直播平台数据

    程序说明:抓取斗鱼直播平台的直播房间号及其观众人数,最后统计出某一时刻的总直播人数和总观众人数. 过程分析: 一.进入斗鱼首页http://www.douyu.com/directory/all 进入 ...

  10. 转载--菜鸟Linux上使用Github

    1.安装Git:Ctrl + Alt + T使用终端:使用命令 sudo apt-get install git 2.创建GitHub帐号:登陆git主页: https://github.com/,自 ...