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. 剑指 offer set 25 求 1+2+...+n

    题目 要求不能使用乘除法, for, while, if else, switch, case 等关键字 思路 1. 循环已经命令禁止, 禁用 if, 意味着递归也不能使用. 但即便如此, 我们仍然要 ...

  2. 【BZOJ2622】[2012国家集训队测试]深入虎穴 次短路

    [BZOJ2622][2012国家集训队测试]深入虎穴 Description 虎是中国传统文化中一个独特的意象.我们既会把老虎的形象用到喜庆的节日装饰画上,也可能把它视作一种邪恶的可怕的动物,例如“ ...

  3. python3-requests库的使用

    同步请求库requests用来做测试和简单爬虫其实非常好用的,今天来讲一讲,毕竟不熟悉就用,吃了很大亏啊,文档一定要好好看 http://docs.python-requests.org/zh_CN/ ...

  4. 170411、java Socket通信的简单例子（UDP）

    服务端代码: package com.bobohe.socket; import java.io.*; import java.net.*; class UDPServer { public stat ...

  5. 160608、mysql距离函数st_distance

    随着近几年各类移动终端的迅速普及,在手机移动定位app中,附近的人,附近的地点功能十分常见,基于地理位置的服务(LBS)和相关应用也越来越多,而支撑这些应用的最基础技术之一,就是基于地理位置信息的处理 ...

  6. CentOS开启telnet连接

    开启telnet连接通道 yum安装telnet yum -y install telnet-server* 关闭防火墙 /etc/init.d/iptables stop 编辑配置文件 vim /e ...

  7. A Secure Cookie Protocol 安全cookie协议 配置服务器Cookie

    Title http://www.cse.msu.edu/~alexliu/publications/Cookie/cookie.pdf AbstractCookies are the primary ...

  8. 3 differences between Savepoints and Checkpoints in Apache Flink

    https://mp.weixin.qq.com/s/nQOxsZUZSiPi7Sx40mgwsA 20181104 3 differences between Savepoints and Chec ...

  9. 时间序列模式——ARIMA模型

    ARIMA模型全称为自回归积分滑动平均模型(Autoregressive Integrated Moving Average Model,简记ARIMA),是由博克思(Box)和詹金斯(Jenkins ...

  10. 国产服务器离线安装gm

    离线安装过程: 1.安装JPEGlib cd /opt/ ls tar -zxvf jpegsrc.v9b.tar.gz cd jpeg-9b/ ./configure make make insta ...