网页转图片--- html2canvas截图
最近有个做在线名片(可保存图片至本地)的任务,特意研究了一下图片生成,也踩了几个坑。特此总结一下,顺便分享一下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截图的更多相关文章
- 使用canvas截图网页为图片并解决跨域空白以及模糊问题
前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...
- chrome也可以整张网页截图,保存完整网页为图片
转自:http://www.webkaka.com/blog/archives/chrome-save-a-webpage.html 关于浏览器截图,一直以为Chrome无能为力,最近发现,原来Chr ...
- python连续爬取多个网页的图片分别保存到不同的文件夹
python连续爬取多个网页的图片分别保存到不同的文件夹 作者:vpoet mail:vpoet_sir@163.com #coding:utf-8 import urllib import ur ...
- python爬取某个网页的图片-如百度贴吧
python爬取某个网页的图片-如百度贴吧 作者:vpoet mail:vpoet_sir@163.com 注:随意copy,不用告诉我 #coding:utf-8 import urllib imp ...
- Jquery 网页转换为图片
/* html2canvas 0.5.0-alpha1 <http://html2canvas.hertzen.com> Copyright (c) 2015 Niklas von Her ...
- 通过jcrop和canvas的画布功能完成对图片的截图功能与视频的截图功能实现
最近因为工作需要,做了视频截图和图截图的功能.大概需求是,用户点击某个按钮,可以对图片区域进行部分截取,然后进行进一步的业务操作. 首先说图片截图功能的思路, (1)下载Jcrop插件,添加css和j ...
- delphi WebBrowser控件上网页验证码图片识别教程(一)
步骤一:获取网页中验证码图片的url地址 在delphi中加入一个BitBtn和一个memo以及WebBrowser控件实现网页中验证码图片的url地址的获取 程序如下:procedure TForm ...
- 浅谈Android中拍照、从相册选择图片并截图相关知识点
前言 我们在Android开发中经常会需要使用相机或者从相册中选取图片的情况,今天就把这里面相关的知识点总结下,方便以后开发的时候使用. 1.相机拍照并可自定义截图功能 我们先来看如何使用Intent ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
随机推荐
- 常见查找算法之php, js,python版
常用算法 >>>1. 顺序查找, 也叫线性查找, 它从第一个记录开始, 挨个进行对比, 是最基本的查找技术 javaScript 版顺序查找算法: // 顺序查找(线性查找) 只做找 ...
- Python 操作 GA API 指南
因为需要写一个 Blog Feature 的缘故,所以接触了下 GA 的 Python API,发现 G 家的 API 不是那么直观,比较绕,但是,在使用过程中发现其实 G 家的 API 设计挺有意思 ...
- vijos 1213:80人环游世界
描述 想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么一个80人的团伙,也想来一次环游世界. 他们打算兵分多路,游遍每一个国家. ...
- Codeforces Round #280 (Div. 2)_C. Vanya and Exams
C. Vanya and Exams time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- c语言_FILE结构体解释及相关操作
1. 文件和流的关系 C将每个文件简单地作为顺序字节流(如下图).每个文件用文件结束符结束,或者在特定字节数的地方结束,这个特定的字节数可以存储在系统维护的管理数据结构中.当打开文件时,就建立了和文件 ...
- Kubernetes volumes简介
容器中的磁盘文件生命周期比较短暂,在一些比较复杂的容器应用中会产生一些问题.一.容器crash后,kubelet会重启该容器,但这些文件会丢失掉.二.pod中的多个容器经常需要共享文件.因此,Kube ...
- 转:深入理解Java的接口和抽象类
转载原文链接: http://www.cnblogs.com/dolphin0520/p/3811437.html 一.抽象类 在了解抽象类之前,先来了解一下抽象方法.抽象方法是一种特殊的方法:它只有 ...
- webpack优化之code splitting
作为当前风头正盛的打包工具,webpack风靡前端界.确实作为引领了一个时代的打包工具,很多方面都带来了颠覆性的改进,让我们更加的感受到自动化的快感.不过最为大家诟病的一点就是用起来太难了. 要想愉快 ...
- DEDECMS去掉自动生成首页或栏目后面带的index.html
Dede默认生成首页后,首页的链接后面会多出一个index.html.据官方说法这样有利于网站优化.但是这个index.html怎么看都不舒服,而且也不利于seo中主页url的统一.因为我的网站的ur ...
- 查看php的配置文件Php.ini的位置
标签:php服务器 浏览器 配置文件 Linux local 近来,有不博友问php.ini存在哪个目录下?或者修改php.ini以后为何没有生效?基于以上两个问题,我觉得有必要教一下刚接触PHP的博 ...