js html 生成长图,html生成图片

# html生成图片

~~~

*{

margin: 0;

}

.test{

width: 100px;

height: auto;

text-align: center;

line-height: 100px;

background-color: #87CEEB;

display: inline-block;

vertical-align:top;

}

canvas{

margin-right: 5px;

}

.down{

float: right;

margin: 40px 10px;

}

下载

asdfa asdfadsf sdf

//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊

/*html2canvas(document.querySelector('div')).then(function(canvas) {

document.body.appendChild(canvas);

})*/

function createImg(){

//创建一个新的canvas

var canvas2 = document.createElement("canvas");

let _canvas = document.querySelector('div');

var w = parseInt(window.getComputedStyle(_canvas).width);

var h = parseInt(window.getComputedStyle(_canvas).height);

//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

canvas2.width = w * 2;

canvas2.height = h * 2;

canvas2.style.width = w + "px";

canvas2.style.height = h + "px";

//可以按照自己的需求，对context的参数修改,translate指的是偏移量

// var context = canvas.getContext("2d");

// context.translate(0,0);

var context = canvas2.getContext("2d");

context.scale(2,2);

html2canvas(document.querySelector('div'),{canvas:canvas2}).then(function(canvas) {

// document.body.appendChild(canvas);//输出

//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

document.querySelector(".down").setAttribute('href',canvas.toDataURL());

document.querySelector(".src").setAttribute('src',canvas.toDataURL());

});

}

~~~

原文：https://www.cnblogs.com/cjh1111/p/7133838.html