canvas转换成img， html转换成img

 1.canvas转换成img

当时情境：使用jquery.qrcode.js生成qrcode时，默认生成的DOM元素是canvas，而不是img，这如果是在微信开发就无法长按保存图片，所以需要转换成img

//从 canvas 提取图片 image
function convertCanvasToImage(canvas) {
    //新Image对象，可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
}

//获取网页中的canvas对象
var mycanvas1=document.getElementsByTagName('canvas')[0];

//将转换后的img标签插入到html中
var img=convertCanvasToImage(mycanvas1);
$('#img').append(img);//imagQrDiv表示你要插入的容器id

 

 2.html转换成img

当时情境：在上述1的情境下，还是不能满足需求，产品希望将整个背景和二维码都能保存下来，也就是相当于截图保存/转发。那么，我们只有将整个需要保存的html转成图片，即可实现长按保存了。

用到的js类库：html2canvas.js（https://github.com/niklasvh/html2canvas/releases），直接下载需要的js即可

<script type="text/javascript" src="/addons/recommendaward/style/js/recommend.js?v={php echo date('Hi');}" ></script>
<script src="/addons/recommendaward/style/js/html2canvas.js?v={php echo date('Hi');}"></script>

<srcipt>
    html2canvas($("#body")[0]).then(function(canvas){//要转成img的html
	    var imgUri = canvas.toDataURL();
	    $('#cont').hide();//将原来的内容隐藏
	    $("#body").append('<img style="height: inherit;" src="'+imgUri+'" />');//嵌入img到指定元素里
    });
</script>