某些场景需要通过 canvas 绘制一些图片， 其中包含一些文字、可能的二维码等等。 然后实现时如果完全手动的去定位元素在 canvas 中的位置，结果就会产生大量不能复用和难以维护的代码。(使用背景图可能会模糊，可以使用img，结合定位)
html2canvas
1.安装
npm install --save html2canvas也可以直接官网下载js文件 然后引用
2. 使用
//按自己的文件位置引用
import html2canvas from "../../utils/html2canvas.js";
canvasfun() {
//把你需要转为图片的标签放在一个根元素内 直接获取根元素
let save2 = document.getElementsByClassName('list')[0];
html2canvas(save2,{
useCORS: true //很重要支持跨域图片，否则需要自己将线上图片转为本地图片（转base64）
}).then((canvas) => {
//利用a标签实现下载（浏览器环境）
let url = canvas.toDataURL("image/png");
let aLink = document.createElement("a");
aLink.style.display = "none";
url.replace(/^data:image\/png/, "data:application/octet-stream")
aLink.href = url;
aLink.download = "截图.png";
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
console.log(canvas)
//***********************************************************
//小程序webview页面
let url = canvas.toDataURL("image/png");
url.replace(/^data:image\/png/, "data:application/octet-stream")
console.log(canvas)
wx.miniProgram.postMessage({
data: {
base64: url
}
});
//触发 wx.miniProgram.postMessage的bindmessage
wx.miniProgram.redirectTo({
url: '此页面路径',
})
});
},3.属性
| 属性名 | 默认值 | 描述 |
| allowTaint | false | 是否允许跨域图像。会污染画布，导致无法使用canvas.toDataURL 方法 |
| backgroundColor | #ffffff | 画布背景色（如果未在DOM中指定）。设置null为透明 |
| canvas | null | 现有canvas元素用作绘图的基础 |
| foreignObjectRendering |
false | 如果浏览器支持，是否使用ForeignObject渲染 |
| imageTimeout | 15000 | 加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。 |
| ignoreElements | (element) => false | 谓词功能，可从渲染中删除匹配的元素 |
| logging | true | 启用日志以进行调试 |
| onclone | null | 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容，而不会影响原始源文档。 |
| proxy | null | 代理将用于加载跨域图像的网址。如果保留为空，则不会加载跨域图像。 |
| removeContainer | true | 是否清除html2canvas临时创建的克隆DOM元素 |
| scale |
|
用于渲染的比例。默认为浏览器设备像素比率。（图片清晰控制） |
| useCORS | false | 是否尝试使用CORS从服务器加载图像 |
| width | Element width
|
canvas的宽度 |
| height | Element height
|
canvas的高度 |
| x | Element x-offset
|
裁剪画布X坐标 |
| y | Element y-offset
|
裁剪画布y坐标 |
| scrollX | Element scrollX
|
渲染元素时要使用的x滚动位置（例如，如果Element使用position: fixed） |
| scrollY | Element scrollY
|
呈现元素时要使用的y-scroll位置（例如，如果Element使用position: fixed） |
| windowWidth | Window.innerWidth | 渲染时使用的窗口宽度Element，这可能会影响媒体查询之类的内容 |
| windowHeight | Window.innerHeight | 渲染时要使用的窗口高度Element，这可能会影响媒体查询之类的内容 |
如果应用在小程序webview中，需要将base64传到小程序端通过 wx.miniProgram.postMessage（小程序后退、组件销毁、分享、复制链接才会触发）传，然后再web-view标签上绑定bindmessage="callback"，通过wx.miniProgram.redirectTo重新打开此页面触发（看着最合适的方式）
//接上面webview的代码
<web-view src="{{srchtml}}" bindmessage="callback"/>
callback(e){
var data = e.detail.data
console.log(data)
let img = e.detail.data[data.length-1].base64
let imgname = new Date().getTime()
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + '/'+ imgname + '.png', //这里先把文件写到临时目录里.
data: img.slice(22), //****************
encoding: 'base64',
success: res => {
console.log('success')
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/'+ imgname + '.png', //这是把临时文件 保存到 相册
success: res => {
wx.showToast({ title: '保存成功！' })
},
fail: error => { console.log(error) }
})
},
fail: error => { console.log(error) }
})
},wxml2canvas
有的github上的文件有点问题
从这里拷js文件，把demo下载下来跑一遍
分析一下文章来源：https://www.toymoban.com/news/detail-571238.html
drawCanvas() {
wx.showLoading()
const that = this
const query = wx.createSelectorQuery().in(this);
query.select('#wrapper').fields({ // 选择需要生成canvas的范围
size: true,
scrollOffset: true
}, data => {
let width = data.width;
let height = data.height;
that.setData({
width,
height
})
setTimeout(() => {
that.startDraw()
}, 1500);
}).exec()
},
startDraw() {
let that = this
// 创建wxml2canvas对象
let drawMyImage = new wxml2canvas({
element: 'canvas-map', // canvas的id,
obj: that, // 传入当前组件的this
width: that.data.width * 2,
height: that.data.height * 2,
background: '#141415', // 生成图片的背景色
progress(percent) { // 进度
// console.log(percent);
},
finish(url) { // 生成的图片
wx.hideLoading()
console.log(url)
that.savePoster(url)
},
error(res) { // 失败原因
console.log(res);
wx.hideLoading()
}
}, this);
let data = {
// 获取wxml数据
list: [{
type: 'wxml',
class: '.draw .draw1', // draw要绘制的wxml元素根类名， draw1单个元素的类名（所有所有所有要绘制的单个元素都要添加该类名）
limit: '.draw', // 要绘制的wxml元素根根根类名
x: 0,
y: 0
}]
}
// 绘制canvas
drawMyImage.draw(data, this)
},
savePoster() {
const that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imgUrl,
success: function() {
wx.showToast({
title: '保存成功',
icon: 'none',
duration: 1500
});
},
fail(err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.saveImageToPhotosAlbum({
filePath: that.data.imgUrl,
success: function () {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
})
} else {
wx.showToast({
title: '授权失败，请稍后重新获取',
icon: 'none',
duration: 1500
});
}
}
})
}
})
}
}
})
},
还有 wxml-to-canvas（小程序官方） 等插件文章来源地址https://www.toymoban.com/news/detail-571238.html
到了这里，关于html2canvas（将dom元素转为canvas），wxml2canvas（微信小程序）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
