前端学习记录

对图片进行遮挡有 overflow: hidden、clip-path 以及 mask-image。overflow是进行超出不显示，通过父元素遮挡超出部分。但是效果不理想。clip-path是进行裁剪，但是裁剪之后image所占空间不会改变。在线工具mask-image是进行image遮挡，没有实践，据说遮挡之后image所占空间不会改变。最后，还是选择使用canvas进行裁剪工作。image会存在底部有间隙的问题？解决办法：对image设置display:block;一、图片剪裁drawIm

【vue】打字机插件vue3Typed。

js canvas生成海报并本地下载

cropper github传送门思路：上传本地图片；预览（因为cropperjs要对显示的块级元素操作）；本地图片出现后；开始选择裁剪选取；选定后裁剪；代替预览的src；最后销毁cropper。代码如下：// html部分<input type="file" id="uploadImg" @change="uploadimage" accept="image/jpg,image/jpeg,image/png,image/PNG"><img id="upload

vue3.0思路1利用布局将图片与二维码结合；然后使用html2Canvas截取需要部分的，并生产图片的base64；再通过超链接download将截取的图片下载。// 通过点击事件调用这个方法就能进行截取了，注意querSelector中要写入想要截取部分的选择器 doCut() { let that = this; html2canvas(document.querySelector("#poster")).then((canvas) => {

vue实践记录

ant design vue pro 按需引入import {Button} from 'ant-design-vue';app.use(Button);ant design vue pro 全局引入import Antd from 'ant-design-vue';app.use(Antd);ant design vue pro icon 按需引入（组件方式）import {UserOutlined} from '@ant-design/icons-vue'app.component(