js实现选区截图

JavaScript016

js实现选区截图,第1张

具体步骤:

安装canvas2image后运行的时候,如果报错

在node_modules/canvas2image/canvas2image.js后面加上

可以使用html2canvas.js,生成的数据是data:image/jpegbase64格式的:

html2canvas($("#xxxEle")).then(function(canvas) {

var imageData = canvas.toDataURL()

})

一个叫做html2canvas的库,非常棒的一个库,很强大、但用法非常简单.就这么简单的方法,就可以把我的整个页面截图下来了:

function convertHtml2Canvas() { html2canvas(document.body, { allowTaint: false, taintTest: true }).then(function(canvas) { document.body.appendChild(canvas) }).catch(function(e) { console.error('error', e) })}

目前还有一个问题,就是这种方法默认是把整个页面截取下来的(就是说,会以你的innerHeight和innerWidth为边界,会存在大量的空白),可是,我的卡组只是占了页面的一小部分,我只想要卡组的部分啊。其实已经有了canvas就好办了,我们可以对它进行处理啊。大概思路是:1.把上面得到的canvas对象转成Blob并放到一个img元素。然后再把img.src绘制到canvas里面。这时候调用canvas.drawImage方法就可以截取我们想要的内容了。