html2canvas 在线引入,前端使用html2Canvas将html生成图片（兼容IE）

准备工作

// jq 页面必备 必须引入元素嘛

// bluebird 其实用得比较经常 babel es6 转es5 的一个插件

// html2canvas 我们核心插件

复制代码

应用

index.html

title="保存为图片"

style="position: absolute;top:30px;left:100px;"

οnclick="saveCanvas()"

>

保 存

复制代码添加脚本

// 判断浏览器是否为IE 且为IE11以下

function isIE() {

if (!!window.ActiveXObject || 'ActiveXObject' in window) {

return true

} else {

return false

}

}

function saveCanvas() {

// html2canvas($('.Body')).then(function(canvas) {

// var imgUri = canvas

// .toDataURL('image/png')

// .replace('image/png', 'image/octet-stream')

// $('#download').attr('href', imgUri)

// console.log(imgUri)

// document.getElementById('download').click()

// })

html2canvas($('.Body'), {

allowTaint: true,

useCORS: true,

onrendered: function(canvas) {

if (isIE || isIE11 || isEdge) {

var blob = canvas.msToBlob()

navigator.msSaveBlob(blob, 'a.png')

return

}

console.log(123)

canvas.id = 'mycanvas'

var dataURL = canvas.toDataURL('image/png')

var mine_type = 'image/png'

var save_link = document.createElement('a')

save_link.setAttribute('download', 'img')

save_link.href = dataURL

var event = document.createEvent('MouseEvents')

event.initMouseEvent(

'click',

true,

false,

window,

0,

0,

0,

0,

0,

false,

false,

false,

false,

0,

null

)

save_link.dispatchEvent(event)

}

})

}

复制代码

其实这都很简单，琢磨一波 就阔以了