canvas之自定义头像功能实现代码示例

2020-04-25 08:03:36易采站长站整理

html2canvas(document.getElementById('imgContainer'), {
onrendered: function(canvas) {
var imageURL = canvasTransToImage(canavs);
...
}

})
function canvasTransToImage(canvas) {
var imageURL = canvas.toDataURL('image/png');
return imageURL;
}

接着,你就可以便利右侧的canvas容器,讲图片重回到里面了,整个过程就这样结束,回头看来是不是很简单。

相关依赖:

复制代码
<script src=”<a href=”https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js”></script”>https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js”></script</a>>

写在最后:

canvas的操作,要多多注意那些边界条件,什么时候该重绘什么时候该清除,这些是比较重要的。逻辑清晰了,canvas本身的API也就那么几个,操作起来也就没那么麻烦了,最后,谢谢大家查阅,写的不是很清楚,有不懂的可以一起讨论~