前言:
眼前朋友们对“js获取图片的宽高”都比较看重,小伙伴们都需要分析一些“js获取图片的宽高”的相关资讯。那么小编在网上搜集了一些对于“js获取图片的宽高””的相关知识,希望你们能喜欢,兄弟们一起来学习一下吧!本文简介
使用 Fabric.js 创建画布时,可以在参数里配置画布的宽高。
除了初始化时设置之外,Fabric.js 还提供了其他 api 供后期修改画布宽高。
本文列举了 Fabric.js 的3个 api 设置画布宽高。
这3个 api 虽然简单,但在实际开发中可能很重要。比如监听浏览器窗口缩放,动态调整画布的宽高。
如果想入门 Fabric.js 可以看 Fabric.js 中文入门教程
环境说明
Chrome浏览器版本:96.0.4664.45
Fabric.js版本:4.6.0
我是在原生环境下开发的,同时也提供了一份 Vue3 环境下开发的代码(文末有链接)。
实际操作
本例使用了3个 api :
canvas.setWidth:设置画布宽度canvas.setHeight:设置画布高度Canvas.setDimensions:设置画布大小
<style> .btn-x { margin-bottom: 10px; } #canvasBox { border: 1px solid #ccc; }</style><div class="btn-x"> <button onclick="setWidth(200)">宽度200px</button> <button onclick="setHeight(300)">高度300px</button> <button onclick="setDimensions(600, 400)">一键设置宽高:宽度600px,高度400px</button></div><canvas id="canvasBox" width="600" height="600"></canvas><script src=";></script><script> let canvas = null // 设置画布宽度 function setWidth(width) { canvas.setWidth(width) } // 设置画布高度 function setHeight(height) { canvas.setHeight(height) } // 一键设置宽高 function setDimensions(width, height) { canvas.setDimensions({ width, height }) } window.onload = function() { // 使用 元素id 创建画布,此时可以在画布上框选 canvas = new fabric.Canvas('canvasBox', { width: 100, height: 100 }) }</script>
关注我,了解更多Fabric.js的玩法~ 专栏代码仓库:
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #js获取图片的宽高