canvas
weixin_43924261
这个作者很懒,什么都没留下…
展开
-
Canvas绘制有效区域
1、有效区域最多5个2、有效区域面积不小于画布的1/1003、不可拖拽超出画布4、绘制的是四边形<template> <div class="ai-draw-area"> <!-- 背景图 --> <img :src="captureImg" class="img"/> <!-- 画布 --> <canvas id="myCanvas" class="canvas" wi原创 2021-09-09 15:55:37 · 967 阅读 · 0 评论 -
Canvas自定义画笔,绘制四边形
四边形绘制之后,显示每条线的中垂线;点击四边形内部,显示顶点并可移动四边形;拖动顶点,可拉伸四边形<template> <div> <!-- 画布 --> <canvas id="myCanvas" width="960" height="540"> </canvas> <!-- 重新绘制按钮 --> <Button @click="creatDraw">重新绘制</Bu原创 2021-08-30 17:02:40 · 1007 阅读 · 1 评论 -
Canvas增加水印
export const waterMarkMixin = { methods: { /** * 图片添加水印 * @param data { url: '图片地址', depName: '门店名称', time: '当前时间', userName: '用户显示名' } */ addWaterMark(data) { return new Promise(resolve => { if (!data.time) { .原创 2021-08-30 16:55:41 · 135 阅读 · 0 评论 -
Canvas压缩图片
import { EXIF } from './exif.js';function upload(file) { if (!file) return; return this.imgPreview(file);}function imgPreview(file) { let Orientation; //去获取拍照时的信息,解决拍出来的照片旋转问题 EXIF.getData(file, function () { Orientation = EXIF.getTag(th.原创 2021-08-30 16:54:29 · 69 阅读 · 0 评论 -
Canvas实现H5签名
<template> <div class="position-fixed sign-page"> <div>签名</div> <div class="no-sign" @click="goSign"> <img :src="signature" v-if="signature" /> </div> <!--.原创 2021-08-30 16:48:33 · 210 阅读 · 0 评论 -
Canvas获取视频缩略图、时长
methods: { /** * 截取视频中的一帧作为缩略图 * @param url 视频地址 * @param type 1 获取缩略图 2 获取视频时长 * @param imgWidth 图片宽度 * @param imgHeight 图片高度 */ getVideoImg(url, type = 1, imgWidth = 64, imgHeight = 64) { return new Promise(fu.原创 2021-08-30 16:46:09 · 712 阅读 · 0 评论