最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑。特此总结一下,顺便分享一下demo:

  链接:https://pan.baidu.com/s/1o98UBJO 密码:s0hz

  其中也遇到了一些坑比如查询网上的 html2canvas  使用方法,发现很多人总结的方法做出来的图很模糊,或者不支持移动端。最后发现官方API给的方法可用,但是用官方给的方法的时候里面有个 => 符号,会导致编辑器报错。解决方法:把  canvas =>function  改成   function(canvas) 。

  还有一个坑就是该插件会读取jpg图片的exif值(iphone和数码相机拍出来的照片所带的一个值),然后把带exif值的图片旋转再转成图片。这个东西在很多页面中有引用头像或jpg图片的时候会出现。解决方法:改成png,gif等,实在不行就先用exif.js把图片逆向旋转一下。(这主要是在iphone手机上会出现:显示图片正常,转成canvas时会旋转)。具体的exif值我将在下一篇文章中做介绍。

网页转图片--- html2canvas截图的更多相关文章

  1. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  2. chrome也可以整张网页截图,保存完整网页为图片

    转自:http://www.webkaka.com/blog/archives/chrome-save-a-webpage.html 关于浏览器截图,一直以为Chrome无能为力,最近发现,原来Chr ...

  3. python连续爬取多个网页的图片分别保存到不同的文件夹

      python连续爬取多个网页的图片分别保存到不同的文件夹 作者:vpoet mail:vpoet_sir@163.com #coding:utf-8 import urllib import ur ...

  4. python爬取某个网页的图片-如百度贴吧

    python爬取某个网页的图片-如百度贴吧 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用告诉我 #coding:utf-8 import urllib imp ...

  5. Jquery 网页转换为图片

    /* html2canvas 0.5.0-alpha1 <http://html2canvas.hertzen.com> Copyright (c) 2015 Niklas von Her ...

  6. 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现

    最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...

  7. delphi WebBrowser控件上网页验证码图片识别教程(一)

    步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...

  8. 浅谈Android中拍照、从相册选择图片并截图相关知识点

    前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...

  9. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

随机推荐

  1. 声音变调算法PitchShift(模拟汤姆猫) 附完整C++算法实现代码

    上周看到一个变调算法,挺有意思的,原本计划尝试用来润色TTS合成效果的. 实测感觉还需要进一步改进,待有空再思考改进方案. 算法细节原文,移步链接: http://blogs.zynaptiq.com ...

  2. VS工程中添加c/c++工程中外部头文件及库的基本步骤

    转载自 在VS工程中,添加c/c++工程中外部头文件及库的基本步骤: 1.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录:加上头文件存放目录. 2.添加 ...

  3. Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3)(A.B.C,3道暴力题,C可二分求解)

    A. Is it rated? time limit per test:2 seconds memory limit per test:256 megabytes input:standard inp ...

  4. Spring配置集群定时任务

    正常配置定时任务的时候配置定时任务调度工厂的代码如下 <bean id="" class="org.springframework.scheduling.quart ...

  5. SVN版本库修改URL路径或者IP地址

    服务器的IP地址或者URL变更,版本库服务器的IP也要修改,因为当初安装SVN URL没有使用别名,所以使用的人都要修改客户端的IP,以下是参考网上的资料. 1.Windows TortoiseSVN ...

  6. kafka和strom集群的环境安装

    前言 storm和kafka集群安装是没有必然联系的,我将这两个写在一起,是因为他们都是由zookeeper进行管理的,也都依赖于JDK的环境,为了不重复再写一遍配置,所以我将这两个写在一起.若只需一 ...

  7. destoon分页

    <?php //控制分页//分页$pagesize=4;$pagesql="SELECT COUNT(*) AS num FROM `{$DT_PRE}` company"; ...

  8. Struts2与Ajax数据交互

    写在前面: ajax请求在项目中常常使用,今天就平时掌握的总结一下,关于使用ajax请求到Struts2中的action时,前台页面与后台action之间的数据传递交互问题. 这里我主要记录下自己所掌 ...

  9. Core Graphics 和Quartz 2D的区别

    quartz是一个通用的术语,用于描述在IOS和MAC OS X中整个媒体层用到的多种技术 包括图形.动画.音频.适配.  Quart 2D 是一组二位绘图和渲染API,Core Graphic会使用 ...

  10. 基于 HTML5 WebGL 的 3D 仪表数据监控

    工控仪表重点发展基于现场总线技术的主控系统装置及智能化仪表.特种和专用自动化仪表:全面扩大服务领域,推进仪器仪表系统的数字化.智能化.网络化,完成 自动化仪表从模拟技术向数字技术的转变:推进具有自主版 ...