小编最近在做项目时遇到一个问题，那就是，需要将html页面生成图片后并传给app客户端，至于为什么要传给客户端，自然是因为小编的这个项目是客户端中嵌入h5页面，故而需要和客户端内部交互。那么问题就来了，怎么将html页面生成图片，小编在网上查找资料，都是说用html2canvas，find，那就用。好嘛，用了之后发现，小编生成的图片格式为base64格式，难不成将生成的base64编码像在url后边拼接参数一样传给客户端，额…估计会炸了，所以想到将其上传至七牛，生成外部链接后将该链接传给客户端，所以，才有了这一篇笔记。话不多说，上代码。
关于html2canvas ：
1、下载
- 官网地址：http://html2canvas.hertzen.com
- npm:
npm i html2canvas
2、引入
- 直接使用script标签引入
- 在项目中：
import html2canvas from 'html2canvas'
//html:
<div class="container">
hello,world!
</div>
<img src="" class="img"/>
//js:
//1、生成图片
function createImg(dom){
var targetDom = document.querySelector(dom);
var height = targetDom.scrollHeight;
var width = targetDom.scrollWidth;
html2canvas(targetDom, {
useCORS: true,//是否使用跨域
width:width,//图片宽度
height:height,//图片高度
backgroundColor: 'transparent'//图片背景颜色,这个属性小编要提醒一下各位童鞋，html2canvas中为background，但小编使用background进行设置背景色是行不通的，也可能是因为小编已经将页面背景的设置了颜色，所以行不通，故而使用backgroundColor设置生成的图片背景颜色才可行
}).then(canvas => {
let img = canvas.toDataURL('image/png');//图片格式
$(".img").attr('src',img);
}
//2、获取上传七牛需要的token,获取的api由后台提供
function getToken(imgUrl){
let params= {
bucket:"xxxxx"//上传的空间域名
}
$.ajax({
type:"POST",
url:"xxxxx",
dataType:"json",
data:JSON.stringify(params)
}).then(res=>{
//获取到token后，do something
})
}
//3、将生成的图片上传至七牛
function upload(img,token){
let imgUrl = img.split(",")[1];//因为通过html2canvas生成的图片格式为base64格式，链接为：data:image/png;base64,xxxxxxx,我们只需要传xxxxx这一段，故而进行截取
var url = "https://upload.qiniup.com/putb64/-1/aa"; //非华东空间需要根据注意事项 1 修改上传域名
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){
let data = JSON.parse(xhr.responseText);
if(data){
//获取到data的数据结构：{hash:"xxxxxxx",key:"xxxxxx"}
//将data中的key拼接成外部可访问的链接：http://空间域名.域名/data.key }
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization","UpToken "+token);
xhr.send(imgUrl);
}
将已存在的图片上传至七牛:
//将图片转换成base64格式
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
// return dataURL.replace("data:image/png;base64,", "");
}
function main (){
var img = document.createElement('img');
img.src = "../../img/logo.png"; //此处自己替换本地图片的地址
img.onload =function() {
var data = getBase64Image(img);
//获取token
}
}
之前小编写过一篇js调用iOS Android 原生方法的文章，iOS Android通过曝露接口，js通过调用该曝露的接口来进行H5与原生iOS Android即app内部进行交互，现小编给各位童鞋推荐另一种方法，但该方法只能是原生iOS Android监听到h5 ,但h5不能监听到原生的操作。
//js:
window.location.href = url;//url为前端h5与原生商定好的，iOS Android通过监听该链接来进行下一步的操作，也许会有童鞋说，介样页面不就跳转了咩，嗯，不会，小编亲测过，小编推荐的url的demo：xxxx://yyyyy（也可以是yyyy=需要传递的数据），这样就不会跳转哦~
