HTML编码生成图片

2018-08-30  本文已影响0人  Jean杰

借助html2canvas 与 canvas2image库把HTML标签生成图片

思路:

1.生成图片的样式先使用HTML制作出来

2.动态生成canvas,把整个HTML元素反射到画布上;

3.使用canvas功能生成图片

官网链接:http://html2canvas.hertzen.com/

使用方法

html2canvas(element, options);

带有回掉函数的:

var Gwidth =parseInt($(window).width()),Gheight =parseInt($("#content").outerHeight());

html2canvas(element,{scale:2,width:Gwidth,height:Gheight}).then(function(canvas ){

    document.body.appendChild(canvas);

});

注意:

scale:是用来调整生成图片屏幕分辨率的;

width:设置canvas大小,如果不设置会按照屏幕大小设计,移动端需要注意可能会造成图片模糊

这就可以直接把canvas直接转换成图片了;

varimage=newImage();

image.src=canvas.toDataURL("image/png");

或者直接使用canvas2image

var img_data1 = Canvas2Image.saveAsPNG(canvas, true).getAttribute('src');

元素 }}); 元素 }}); 元素    }});

上一篇下一篇

猜你喜欢

热点阅读