对于html代码转化base64文件再转化成图片文件

这段时间在对Hp 打印机做webapp android端的打印，发现蓝牙连接连不上，wifi direct 连接也不好使，不明白到底是怎么回事。。。希望有大神来教一下。。。

所以我就另辟蹊径，利用Hp打印机的打印软件Hp smart 来打印，在需要打印时，调用Hp smart 软件，将文件发送到这个软件，然后通过这个软件连接打印机进行打印。经过了一系列的努力，然后成功打印，但是同时也发现了这个软件只支持图片和pdf的打印，所以只能再次修改。

这就有点悲剧了。。

接着我就在网上找这类相关的资料，好像怎么都找不到如果让打印打印html代码的demo，最后我在网上找到了一个方法----html2canvas插件，就是通过canvas在Bitmap图片获取base64类型的图片，然后转化成jpg或png格式的图片。

算了，写不下去了，用代码吧...

先引入html2canvas.min.js等

 

这里是html代码

	
Hello world!1212

这个是base64转换图片格式使用

(function($, owner) {
//将BASE 64保存为图片文件
	owner.baseImgFile = function(uid, base64, quality, callback) {
        quality = quality || 10;
        callback = callback || $.noop;
        var bitmap = new plus.nativeObj.Bitmap();
        // 从本地加载Bitmap图片
        bitmap.loadBase64Data(base64, function() {
            //    console.log('加载图片成功');
            bitmap.save("_doc/" + uid + ".jpg", {
                overwrite: true,
                quality: quality
            }, function(i) {
                callback(i);
                //    console.log('保存图片成功：'+JSON.stringify(i));
            }, function(e) {
                console.log('保存图片失败：' + JSON.stringify(e));
            });
        }, function(e) {
            console.log('加载图片失败：' + JSON.stringify(e));
        });
    }
}(mui, window.app = {}));

获取canvas绘制成图片的地址，调用上面的方法把地址传入

$(function () {
	html2canvas(document.getElementById("capture"), {
	    useCORS: true,
	    scale: window.devicePixelRatio*2, // 默认值是window.devicePixelRatio
	    logging: false
	});
    
    html2canvas(document.querySelector("#capture")).then(canvas => {
	    document.body.appendChild(canvas);

	    var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
	    var saveLink = document.createElement( 'a');
	    //console.log(imgUri);
        //app.baseImgFile(文件名，base64路径，清晰度1-100，function(i){
        // i包括文件路径file:// 格式等详情信息
        //})
	    app.baseImgFile('1',imgUri,70,function(i){
	       alert(JSON.stringify(i.target));
	       $('#apptest').attr('src',i.target);
            //查看下文件路径是否有效
	    });
	}) 
})

好了，html代码转换图片成功了，图片的实际路径拿到了，我在通过h5的系统分享功能进行传递到打印机

系统分享

 比较懒，直接拿mui系统的dome来用

function shareSystem(){
	outSet('调用系统分享');
	var msg={type:'image'};
	console.log(apptest.src);
  	msg.pictures=[apptest.src];
  	
	if('iOS'==plus.os.name){//iOS平台添加链接地址
		msg.href='http://www.dcloud.io/';
	}
	
	outLine(JSON.stringify(msg));

	plus.share.sendWithSystem?plus.share.sendWithSystem(msg, function(){
		outLine('Success');
		
		console.log('Success');
	}, function(e){
		outLine('Failed: '+JSON.stringify(e));
		console.log('Failed: '+JSON.stringify(e));
	}):shareSystemNativeJS(msg);
}

function shareSystemNativeJS(msg) {
	if(plus.os.name!=='Android'){
		plus.nativeUI.alert('此平台暂不支持系统分享功能!');
		return;
	}
	var intent=new Intent(Intent.ACTION_SEND);
//  intent.setType('text/plain');
//text
    intent.setType('image/*');
//图片
//	intent.setType('application/msword');
	intent.putExtra(Intent.EXTRA_SUBJECT,'HelloH5');
	
	console.log(msg);
	
//	intent.putExtra(Intent.EXTRA_TEXT,sharecontent.value);
	intent.putExtra(Intent.EXTRA_STREAM,msg);
	intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
	main.startActivity(Intent.createChooser(intent,'系统分享HelloH5'));
}