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. 自动化测试环境准备robotframework

    (一)针对python2.7版本的自动化环境准备: python 下载地址: https://www.python.org/downloads/ 这里选择Python2.7系列的,后面涉及到wxPyt ...

  2. 华为 进入和退出Fastboot、eRecovery和Recovery升级模式

    手机关机状态下,可以进入Fastboot/eRecovery / Recovery/升级这几种模式: 需要连接电脑:Fastboot模式:长按音量下键+电源键.eRecovery 模式:长按音量上键+ ...

  3. 插件—jquery.validate.js

    前言 在学习jquery.validate.js中的一个小案例,只是这个插件的简单使用. 案例代码如下: <head>    <title></title>    ...

  4. 【POJ3565】ANTS KM算法

    [POJ3565]ANTS 题意:平面上有2*n个点,N白N黑.为每个白点找一个黑点与之连边,最后所有边不交叉.求一种方案. 题解:KM算法真是一个神奇的算法,虽然感觉KM能做的题用费用流都能做~ 本 ...

  5. maven发布项目的snapshot到nexus

    1.配置发布地址信息 <repositories> <repository> <id>nexus</id> <name>Local Repo ...

  6. 160428、JavaScript知识总结—cookie及其应用

    一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客 ...

  7. A Magic Lamp---hdu3183（链表删除| RMQ）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3183 给你一个长度<1000的数a,和m<len(a); 让把数a删除m个数字之后剩下的数 ...

  8. Django中对静态文件的支持（转）

    英文原文:[http://agiliq.com/blog/2013/03/serving-static-files-in-django/] 译文:[http://segmentfault.com/a/ ...

  9. 【我的Android进阶之旅】Jenkins挂载slave节点，增强分布式编译的效率

    由于公司的Jenkins任务越来越多,而且所有的Android Jenkins任务都在同一台服务器上进行编译,而且该服务器配置Jenkins任务最多3个任务同时运行,所以有时候大家一起编译的时候,只能 ...

  10. spring MVC 学习(四)---拦截器，视图解析器

    1.接口HandlerInterceptor 该接口包含3个方法,分别是preHandle,postHandle,afterCompletion,分别代表着执行前,执行后,执行完成要执行的方法,其中p ...