H5 将html页面内容生成图片并上传至七牛

小编最近在做项目时遇到一个问题，那就是，需要将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:

hello,world!


//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=需要传递的数据），这样就不会跳转哦~