htmlcanvas2实现将网页生成图片，自定义保存图片的名称

首先熟悉htmlcanvas2的使用方法，看看github的使用说明

https://github.com/niklasvh/html2canvas

        html2canvas(document.body).then(function(canvas) {document.body.appendChild(canvas);});

这是我要截取的网页的html效果图

使用htmlcanvas2需要注意一下几个坑（这都是我一个一个踩过的）：

1 如果你截取的网页中有图片和文字，在本地测试时生成图片时，网页中的图片截取出来竟然是空白？

（心里在想：什么狗屁插件根本不管用图片都截取不了）

原因：程序必须放在服务器下运行，不然的话网页中的图片是出不来的

2 把程序放在服务器上运行了，发现图片还是出不来，有图片的地方还是一片空白？生成的图片效果是这样的

为什么一个二维码图片可以出来，另一个二维码图片没有出来？这就要从二维码身上找原因了

我的二维码的生成用到了这个插件jquery.qrcode-logo.js，调用方法如下：

$("#code").qrcode({ render : "canvas",text: pay_url,width:312,height:312,src: 'http://css.zzebz.com/images/kkbl.jpg'
});

发现两个二维码的调用区别是多了一个 src: 'http://css.zzebz.com/css//images/kkbl.jpg' 就是二维码中间的logo小图片，这个依然是图片的跨域问题，所以我们一定要避免截取的网页中的图片跨域问题！把这个路径换成本地路径 src: '__STATIC__/images/kkbl.jpg'；

这里还会存在一个问题，在jquery.qrcode-logo的二维码没有生成之前htmlcanvas已经开始生成图片了，这样生成的图片中的二维码是空白，

所以htmlcanvas2的执行要延迟1s。现在生成图片之后是可以手动右键鼠标将图片另存为保存图片的。这样截图就OK了，代码如下：

 setTimeout(function(){html2canvas($("#view"), {onrendered: function(canvas) {$("#qrbox").append(canvas);}});},1000);

如果我想在保存图片的时候可以自定义图片的名称该如何做？我从网上搜到一段代码如下：

     var type = 'png';var imgData = canvas.toDataURL(type);var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};imgData = imgData.replace(_fixType(type),'image/octet-stream');var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};var filename = shopname + '.' + type;saveFile(imgData,filename);

html2canvas2生成的图片是一个大的canvas,只有获取到了这个canvas才可以自定义保存图片的名称，

这里的关键在于如何获取到这个canvas,这个canvas上并没有id 什么都没有

首先想到的通过id="qrbox"获取里边的子元素

var can = document.getElementById("qrcode").getElementsByTagName("canvas")[0];
console.log(can);结果：<canvas width="120" height="120"></canvas>

得到的canvas是这样的宽高是120的canvas，这个canvas竟然不是那张大图片的canvas，而是右下角jquery.qrcode-logo生成的那张二维码？这里非常的怪异！

尝试着获取#qrcode的第一个子元素第二个子元素，全部是undefined，通过qrbox中的子元素来获取这个大的canvas失败了！！

所以我就想到如何为htmlcanvas2生成的这个大的canvas增加一个id，这样就要修改htmlcanvas2源码了

源码三千多行，其实我的内心是崩溃的，多半这个id是不好加上的

我在想既然htmlcanvas2绘制出了这个大的canvas,那我就去找源码中绘制canvas的代码createElement("canvas")，绘制的时候就手动增加id，就这样一个一个的打出来试试

第一处：
var croppedCanvas = document.createElement("canvas");
croppedCanvas.setAttribute("id","myCanvas");
console.log(croppedCanvas);
第二处：
this.canvas = this.options.canvas || this.document.createElement("canvas");
this.canvas.setAttribute("id","myCanvas");
console.log(this.canvas);
第三处：
var ctx, canvas = document.createElement('canvas');
canvas.setAttribute("id","myCanvas");canvas.setAttribute("id","myCanvas");console.log(canvas);
canvas.width = size.width;
canvas.height = size.height;
...................就不一一列出了

令我惊喜的是，终于得到了我想要的id,现在就可以用id来找到这个canvas了,结合我的项目修改之后自定义保存图片名称的完整代码如下：

var shopname = "糖猫猫的店铺";
var c = document.getElementById("myCanvas");console.log(c);
document.getElementById("btnsave").addEventListener("click",function(){if(c==null){alert("获取数据失败，请刷新页面！");return false;}var type = 'png';var imgData = c.toDataURL(type);var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};imgData = imgData.replace(_fixType(type),'image/octet-stream');var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};var filename = shopname + '.' + type;saveFile(imgData,filename);
});

这是什么编辑器真的不好用，编辑出来的都是什么格式！重新弄了无数次！！！

参考文章：http://blog.csdn.net/qq547276542/article/details/51906741

htmlcanvas2实现将网页生成图片，自定义保存图片的名称相关推荐

Winform将网页生成图片
今天无意见看到浏览器有将网页生成图片的功能,顿时赶脚很好奇,于是就找了找资料自己做了一个类似的功能. 工具截图: 生成后的图片手动填写网站地址,可选择图片类型和保持图片地址,来生成页面的图片,当图片 ...
微信分享网页链接自定义图片和文字描述
今天开发需要微信分享网页链接自定义图片和文字描述,于是网上各种查找资料和各种看手册,遇到了好多坑,不过啃了半天以后终于把问题解决了,以防以后忘记,今天记录一下; 首先,由于微信已经发布了想要分享链接必 ...
微信H5实现网页长按保存图片及识别二维码
实现微信H5实现网页长按保存图片及识别二维码使用工具 html2canvas 官方文档 html2canvas.hertzen.com/ canvas2image github.com/hongru ...
android 自定义apk名,Android Studio多渠道打包、自定义打包APK名称
现在为了推广产品,会在多个渠道应用市场发布应用,为了统计不同渠道的数据,需要在应用中表明渠道,如果一个一个去修改打包效率会很低.AS为我们提供了简便的方法,可以多渠道打包,一次打包所有的渠道包. 1. ...
计算机管理员和用户名区别,Administrator记不住?教你自定义管理员账户名称
如果你在安装Windows的过程中跳过了某些步骤,或者你的系统安装盘来路不明,那么恭喜了,现在你使用的操作系统默认管理员账户肯定是"Administrator"吧?记得住吗?反正超 ...
微信每日早安推送，快来给你女友做爱心提醒吧，自定义推送名称，企业号通知非订阅号测试号，后台python，精简无第三方网站注册、无第三方接口，无基础快速上不了手
每日定时推送给女友,微信消息推送后,锁屏可提醒,聊天界面可顶置,可自定义聊天框名称,聊天头像可修改,内容可增加图片~每日推送python源码自取手把手教你微信每日推送早安,目前为止效果最好版本. 企 ...
企业微信每日给女友推送早安，5分钟快速部署，腾讯云部署版本，每日定时发送，天气，鸡汤，纪念日等信息，可自定义通知提醒名称，聊天界面可置顶，内容可查图片。
企业微信每日给女朋友推送早安,5分钟快速部署,每日定时发送,天气,鸡汤,纪念日等信息,可自定义通知提醒名称,聊天界面可置顶,内容可查图片. 先看效果直接开搞准备工作 1.企业id 2.企业应用se ...
解决cv保存图片中文名称乱码 cv2.imwrite cv2.imencode
解决opencv保存图片中文名称乱码寮犱笁代码 import cv2cv2.imwrite('张三.jpg') 解决办法 import cv2output_path = '张三.jpg' cv2. ...
WordPress自定义文章作者名称
有时候网站会收到一些投稿文章,或者也会转载别人的文章,新创建一个用户又有些麻烦,但在作者名称那里显示自己的名字,总不是那么和谐.今天倡萌推荐 @西秦公子的一个小插件,支持在后台自定义当前文章的作者名 ...

htmlcanvas2实现将网页生成图片，自定义保存图片的名称

htmlcanvas2实现将网页生成图片，自定义保存图片的名称相关推荐

最新文章

热门文章