VUE项目开发，使用canvas实现图片签名编辑手写板功能

已于 2023-07-11 10:55:58 修改
阅读量2.1k 收藏 6
点赞数
文章标签： vue.js javascript 前端 canvas 1024程序员节
于 2022-10-11 16:54:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39277183/article/details/127264929
版权

vue项目使用canvas实现手写板功能

效果图

在这里插入图片描述

组件CanvasDialog.vue

直接上代码，下面代码可以当做组件直接引用，根据自己的需求传对应的图片即可，操作图标需要自己替换，保存功能也需要自己实现。

<template>
  <el-dialog
    :visible="true"
    title="图片编辑"
    style="font-size: 18px"
    width="1400px"
    :close-on-click-modal="false"
    @close="closeDialog"
    append-to-body
  >
    <div class="modal-body">
      <div class="container">
        <canvas height="570"
            id="canvas"
            ref="canvas"
            width="940"></canvas>
        <div class="tool-container">
          <div class="icon-div icon" @click="isShowDrawPane = !isShowDrawPane">
          	<!-- 举例子：svg-icon可换成<i class="el-icon-delete"></i> -->
            <svg-icon icon-class="draw" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('erase')">
            <svg-icon icon-class="erase" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('undefined')">
            <svg-icon icon-class="ziyoubi" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('line')">
            <svg-icon icon-class="line" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('arrows')">
            <svg-icon icon-class="arrows" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('rect')">
            <svg-icon icon-class="rect" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('circle')">
            <svg-icon icon-class="circle" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="filterObject('text')">
            <svg-icon icon-class="text" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="clearCanvas()">
            <svg-icon icon-class="clear" scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="redo()">
            <svg-icon :icon-class="historyImageData.length > 0 ? 'redo' : 'grey-redo' " scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="cancelRedo()">
            <svg-icon :icon-class="newHistoryImageData.length > 0 ? 'cancelRedo' : 'grey-cancelRedo' " scale="4"></svg-icon>
          </div>
          <div class="icon-div icon" @click="downLoad()">
            <svg-icon icon-class="download" scale="4"></svg-icon>
          </div>
          <div class="drawPane" v-show="isShowDrawPane">
            <div @click="isShowDrawPane = false">
              <svg-icon icon-class="close" class="close-draw-pane icon" scale="3"></svg-icon>
            </div>
            <div class="colorClass">画笔大小</div>
            <input type="range" id="lwRange" min="1" max="10" value="1" @change="LwRangeBtn"/>
            <div class="colorClass">画笔颜色</div>
            <input type="color" id="lcolor" value="#FF1493" @change="LcolorBtn"/>
          </div>
        </div>
        <textarea
          id="textarea"
          name="textBox"
          cols="9"
          rows="1"
          class="text-style"
          v-show="isShowText"
        ></textarea>
      </div>
      </div>
    <div slot="footer" class="dialog-footer">
      <el-button plain @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitBtn" class="g-background00BCD4" :disable="loading" :loading="loading">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
//画笔颜色选择引入
import pickerColor from './pickerColor'
export default {
  props: {
    otherParameter: Object,//我这里传了对象是因为我的业务需求，可直接传baseUrl:String
  },
  components:{pickerColor},
  data() {
    return {
      form: {},

      isShowDrawPane: false,
      canvas: null,
      context: null,
      //线宽
      lwidth: 2,
      //画笔颜色
      lcolor: "#FF1493",
      textColor:"#FF1493",
      //维护绘画状态的数组
      paintTypeArr: {
        painting: false,
        erase: false,
        line: false,
        arrows: false,
        rect: false,
        circle: false,
        text: false,
      },
      //最近一次的canvas图片的数据
      imageData: null,
      //是否显示文字编写框
      isShowText: false,
      //保存画布图片历史的数据
      historyImageData:[],
      //保存已被撤销的历史画布图片数据
      newHistoryImageData:[],
      socket:null,
      img: null,
      filterType: undefined,
      loading: false
    };
  },
  watch: {
    color () {
      this.context.strokeStyle = this.color;
      // this.pickerVisible = false//颜色改变后消失
    }
  },
  mounted() {
    let self = this;
    self.init()  
    window.onresize = function () {
      self.init()  
    }  
    this.listen() 
  },
  methods: {
    LwRangeBtn() {
      this.lwidth = parseInt(document.getElementById("lwRange").value)  
    },
    LcolorBtn() {
      this.context.fillStyle = document.getElementById("lcolor").value  
      this.context.strokeStyle = document.getElementById("lcolor").value  
      this.textColor = document.getElementById("lcolor").value 
    },

    closeDialog() {
      this.$emit("onClose");
    },
    dataURLtoFile(dataURI, type) {
      let binary = atob(dataURI.split(',')[1]);
      let array = [];
      for(let i = 0; i < binary.length; i++) {
                array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type:type });
    },
     //初始化画布
    init() {
      this.$nextTick(()=>{
        this.canvas = document.getElementById("canvas")  
        this.context = this.canvas.getContext('2d')
        this.imageData && this.context.putImageData(this.imageData, 0, 0)  
        let img = new Image()
        img.setAttribute('crossOrigin', 'anonymous');
        let url = this.otherParameter.base64;//重点之重，这是要编辑的图片base64，如图一
        img.src = url
        img.onload = () => {
          if (img.complete) {
            this.canvas.setAttribute('width', img.width)
            this.canvas.setAttribute('height', img.height)
            this.context .drawImage(img, 0, 0, img.width, img.height)
            this.img = img
            this.textColor = "#FF1493";
            this.context.fillStyle =  "#FF1493";
            this.context.strokeStyle =  "#FF1493";
          }
        }
      })
    },
    //监听鼠标,用于画笔任意绘制和橡皮擦
    listen() {
      this.$nextTick(()=>{
        let self = this  
        let lastPoint = { x: undefined, y: undefined }  
        let rect = self.canvas.getBoundingClientRect()  
        console.log(rect,"rect")
        var scaleX = self.canvas.width / rect.width  
        var scaleY = self.canvas.height / rect.height  
        console.log(scaleX,"scaleX")
        console.log(scaleY,"scaleY")
        let textPoint = { x: undefined, y: undefined }  

        self.canvas.onmousedown = function (e) {
          self.paintTypeArr["painting"] = true  

          let x1 = e.clientX  
          let y1 = e.clientY  
          x1 -= rect.left  
          y1 -= rect.top  
          lastPoint = { x: x1 * scaleX, y: y1 * scaleY }  
          console.log((self.paintTypeArr["text"]))
          if (self.paintTypeArr["text"]) {
            let textarea = document.getElementById("textarea")  
            if (self.isShowText) {
              let textContent = textarea.value  
              self.isShowText = false   
              textarea.value = ""  
              console.log(textPoint.x, textPoint.y,"textPoint.x, textPoint.y,")
              self.drawText(textPoint.x, textPoint.y, textContent) 
            } else if (!self.isShowText) {
              self.isShowText = true  
              textarea.style.left = lastPoint.x + "px"  
              textarea.style.top = lastPoint.y + 160 + "px"  
              textarea.style.color = self.textColor
              textPoint = { x: lastPoint.x, y: lastPoint.y }  
              // textarea.style['z-index'] = 6
            }
          }

          if (self.paintTypeArr["erase"]) {
            let ctx = self.context  
            ctx.save()  
            ctx.globalCompositeOperation = "destination-out"  
            ctx.beginPath()  
            let radius = self.lWidth / 2 > 5 ? self.lWidth / 2 : 5  
            ctx.arc(lastPoint.x, lastPoint.y, radius, 0, 2 * Math.PI)  
            ctx.clip()  
            ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)  
            ctx.restore()  
          }

          var thee = e ? e : window.event  
          self.stopBubble(thee)  
        }  
        self.canvas.onmousemove = function (e) {
          let x2 = e.clientX  
          let y2 = e.clientY  
          x2 -= rect.left  
          y2 -= rect.top  
          let newPoint = { x: x2 * scaleX, y: y2 * scaleY }  

          if (self.isPainting()) {
            self.drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
            lastPoint = newPoint  
          } else if (self.paintTypeArr["erase"]) {
            if(!lastPoint.x && !lastPoint.y){return}
            self.handleErase(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
            lastPoint = newPoint  
          } else if (self.paintTypeArr["line"]) {
            // self.clearCanvas()  
            self.imageData && self.context.putImageData(self.imageData, 0, 0)  
            self.drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
          } else if (self.paintTypeArr["arrows"]) {
            // self.clearCanvas()  
            self.imageData && self.context.putImageData(self.imageData, 0, 0)  
            self.drawArrow(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
          } else if (self.paintTypeArr["rect"]) {
            // self.clearCanvas()  
            self.imageData && self.context.putImageData(self.imageData, 0, 0)  
            self.drawRect(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
          } else if (self.paintTypeArr["circle"]) {
            // self.clearCanvas()  
            
            self.imageData && self.context.putImageData(self.imageData, 0, 0) 
            console.log(self.imageData) 
            self.drawCircle(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)  
          }

          var thee = e ? e : window.event  
          self.stopBubble(thee)  
        }  
        self.canvas.onmouseup = function () {
          lastPoint = { x: undefined, y: undefined }  
          self.canvasDraw()  
          console.log(123)
          self.filterObject(self.filterType)  
        }  
      })
    },
    //更新绘画类型数组paintTypeArr的状态
    filterObject(type) {
      this.filterType = type
      if (!type) {
        for (const key in this.paintTypeArr) {
          this.paintTypeArr[key] = false  
        }
      } else {
        for (const key in this.paintTypeArr) {
          key === type
            ? (this.paintTypeArr[key] = true)
            : (this.paintTypeArr[key] = false)  
        }
      }
    },
    //阻止事件冒泡
    stopBubble(evt) {
      if (evt.stopPropagation) {
        evt.stopPropagation()  
      } else {
        //ie
        evt.cancelBubble = true  
      }
    },
    //判断是否是自由绘画模式
    isPainting() {
      for (let key in this.paintTypeArr) {
        if (key !== "painting" && this.paintTypeArr[key]) {
          return false  
        }
      }
      if (this.paintTypeArr["painting"]) {
        return true  
      }
      return false  
    },
    //橡皮擦
    handleErase(x1, y1, x2, y2) {
      let ctx = this.context  
      //获取两个点之间的剪辑区域四个端点
      var asin = radius * Math.sin(Math.atan((y2 - y1) / (x2 - x1)))  
      var acos = radius * Math.cos(Math.atan((y2 - y1) / (x2 - x1)))  
      var x3 = x1 + asin  
      var y3 = y1 - acos  
      var x4 = x1 - asin  
      var y4 = y1 + acos  
      var x5 = x2 + asin  
      var y5 = y2 - acos  
      var x6 = x2 - asin  
      var y6 = y2 + acos   //保证线条的连贯，所以在矩形一端画圆

      ctx.save()  
      ctx.beginPath()  
      ctx.globalCompositeOperation = "destination-out"  
      let radius = this.lWidth / 2 > 5 ? this.lWidth / 2 : 5  
      ctx.arc(x2, y2, radius, 0, 2 * Math.PI)  
      ctx.clip()  
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)  
      ctx.restore()   //清除矩形剪辑区域里的像素

      ctx.save()  
      ctx.beginPath()  
      ctx.globalCompositeOperation = "destination-out"  
      ctx.moveTo(x3, y3)  
      ctx.lineTo(x5, y5)  
      ctx.lineTo(x6, y6)  
      ctx.lineTo(x4, y4)  
      ctx.closePath()  
      ctx.clip()  
      ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)  
      ctx.restore()  
    },
    //画线
    drawLine(fromX, fromY, toX, toY) {
      
      let ctx = this.context  
      ctx.beginPath()  
      ctx.lineWidth = this.lwidth  
      ctx.lineCap = "round"  
      ctx.lineJoin = "round"  
      ctx.moveTo(fromX, fromY)  
      ctx.lineTo(toX, toY)  
      ctx.stroke()  
      ctx.closePath()  
    },
    //画箭头
    drawArrow(fromX, fromY, toX, toY) {
      let ctx = this.context  
      var headlen = 10   //自定义箭头线的长度
      var theta = 45   //自定义箭头线与直线的夹角，个人觉得45°刚刚好
      var arrowX, arrowY   //箭头线终点坐标
      // 计算各角度和对应的箭头终点坐标
      var angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI  
      var angle1 = ((angle + theta) * Math.PI) / 180  
      var angle2 = ((angle - theta) * Math.PI) / 180  
      var topX = headlen * Math.cos(angle1)  
      var topY = headlen * Math.sin(angle1)  
      var botX = headlen * Math.cos(angle2)  
      var botY = headlen * Math.sin(angle2)  
      ctx.beginPath()  
      //画直线
      ctx.moveTo(fromX, fromY)  
      ctx.lineTo(toX, toY)  

      arrowX = toX + topX  
      arrowY = toY + topY  
      //画上边箭头线
      ctx.moveTo(arrowX, arrowY)  
      ctx.lineTo(toX, toY)  

      arrowX = toX + botX  
      arrowY = toY + botY  
      //画下边箭头线
      ctx.lineTo(arrowX, arrowY)  

      ctx.stroke()  
      ctx.closePath()  
    },
    //绘制矩形
    drawRect(topLeftX, topLeftY, botRightX, botRightY) {
      let ctx = this.context  
      ctx.strokeRect(
        topLeftX,
        topLeftY,
        Math.abs(botRightX - topLeftX),
        Math.abs(botRightY - topLeftY)
      )  
    },
    //画圆
    drawCircle(circleX, circleY, endX, endY) {
      console.log(circleX, circleY, endX, endY)
      let ctx = this.context  
      let radius = Math.sqrt(
        (circleX - endX) * (circleX - endX) +
          (circleY - endY) * (circleY - endY)
      )  
      ctx.beginPath()  
      ctx.arc(circleX, circleY, radius, 0, Math.PI * 2, true)  
      ctx.stroke()  
    },
    //画文字
    drawText(startX, startY, content) {
      let ctx = this.context  
      ctx.save()  
      ctx.beginPath()  
      ctx.font = "25px orbitron"  
      ctx.textBaseline = "top"  
      ctx.fillText(content, parseInt(startX), parseInt(startY))  
      ctx.restore()  
      ctx.closePath()  
    },
    //清屏
    clearCanvas() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)  
      this.init()
      console.log(this.imageData) 
    },
    //定格画布图片
    canvasDraw() {
      this.imageData = this.context.getImageData(0,0,this.canvas.width,this.canvas.height)  
      this.historyImageData.push(this.imageData)
      console.log(this.historyImageData)
      console.log(this.imageData)
    },
    //撤销
    redo(){
      let historyImageData = this.historyImageData
      let newHistoryImageData = this.newHistoryImageData
      if(historyImageData.length > 0){
        let hisImg = historyImageData.pop()
        newHistoryImageData.push(hisImg)
        if(historyImageData.length === 0){
          this.imageData = null
          this.clearCanvas()
          this.init()
        }else{
          this.context.putImageData(historyImageData[historyImageData.length - 1],0,0)
        }
      }
    },
    //反撤销
    cancelRedo(){
      if(this.newHistoryImageData.length > 0){
        const newHisImg = this.newHistoryImageData.pop()
        this.imageData = newHisImg
        this.context.putImageData(newHisImg,0,0)
        this.historyImageData.push(newHisImg)
      }
    },
    //保存图片
    downLoad(){
      const imgUrl = this.canvas.toDataURL('image/png')
      const a = document.createElement('a')
      a.href = imgUrl
      a.download = '绘图保存记录' + (new Date).getTime()
      a.target = '_blank'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a);
      console.log(this.imageData) 
    },
	submitBtn() {
		//防止多次点击提交
      this.loading = true;
      setTimeout(()=>{
          this.loading = false;
      },3000)

      let fileObj = {
        relativeType: 3,
        name:"编辑图片"
      }
      let canvas = document.getElementById('canvas')
      var file = canvas.toDataURL("image/png");
      var formData = new FormData();
      let blob= this.dataURLtoFile(file, 'image/jpg')
      let fileOfBlob = new File([blob], new Date()+'.jpg')
      formData.append('file', fileOfBlob);
      formData.append('relativeType', 3);
      formData.append('name', "编辑图片");
      //上传图片后提交保存，根据实际开发需求编写
      this.$axios
        .postUpload("/uxxxoad", formData)
        .then((response) => {
         this.$api.creatxxxxRule({taskBreakRule}).then((response)=>{
          if(response.success) {  
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.$emit("onClose",true)
          } else {
            this.$message({
              message: response.info,
              type: "error"
            });
          }
        })
    });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // width: 100%;
  // height: 100%;
  // margin: 10px auto;
  // overflow: hidden;
}
.tool-container {
  width: 580px;
  border: 2px solid orange;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  position: relative;
}
.drawPane {
  padding: 25px 20px;
  height: 120px;
  position: absolute;
  top: -120px;
  left: 0px;
  border-radius: 5px;
  border: 2px solid orangered;
}
.close-draw-pane {
  position: absolute;
  right: 5px;
  top: 5px;
}
.icon-div {
  margin: 4px 12px;
}
.icon :hover {
  cursor: pointer;
}
input[type="range"] {
  -webkit-appearance: none;
  width: 180px;
  height: 24px;
  outline: none;
  margin-bottom: 3px;
}
input[type="range"]::-webkit-slider-runnable-track {
  background-color: orangered;
  height: 4px;
  border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: orange;
  cursor: pointer;
  margin-top: -4px;
}
.text-style {
  float: left;
  position: absolute;
  font: 25px orbitron;
  word-break: break-all;
  background-color: transparent;
}
.colorClass {
  color: orange;
}
.svg-icon {
  font-size: 24px;
}
</style>

组件pickerColor.vue

<template>
  <div>
    <photoshop-picker v-if="type === 'photoshop'" v-model="colors"></photoshop-picker>
    <material-picker v-if="type === 'material'" v-model="colors"></material-picker>
    <compact-picker v-if="type === 'compact'" v-model="colors"></compact-picker>
    <swatches-picker v-if="type === 'swatches'" v-model="colors"></swatches-picker>
    <slider-picker v-if="type === 'slider'" v-model="colors"></slider-picker>
    <sketch-picker v-if="type === 'sketch'" v-model="colors"></sketch-picker>
    <chrome-picker v-if="type === 'chrome'" v-model="colors"></chrome-picker>
  </div>
</template>

<script>
//这些不需要单独引入，vue项目构建会安装了vue-color这个依赖包，在根目录node_modules可以找到vue-color依赖包。
import {
  Photoshop,
  Material,
  Compact,
  Swatches,
  Slider,
  Sketch,
  Chrome,
} from "vue-color";
export default {
  name: "pickerColor",
  props: {
    "color": String,
    type: {
      default: "photoshop",
    },
  },
  components: {
    "photoshop-picker": Photoshop,
    "material-picker": Material,
    "compact-picker": Compact,
    "swatches-picker": Swatches,
    "slider-picker": Slider,
    "sketch-picker": Sketch,
    "chrome-picker": Chrome,
  },
  data () {
    return {
      colors: "",
    };
  },
  methods: {},
  watch: {
    colors () {
      this.$emit("update:color", this.colors.hex);
    },
  },
};
</script>

<style></style>

传参格式

图一：
在这里插入图片描述
不敢说很全面，但是应该也够用了，也希望帮到有同样需求的你们。

寄语

在这里插入图片描述

Jonhos
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
canvas路线图 vue_vue 基于canvas的编辑图片并上传至服务器。只要两碗双皮奶的时间，你上你也行...
weixin_30750349的博客
01-15 500
来，效果图1、实现思路先通过浏览器打开本地图片，再用canvas加载图片，然后通过getImageData把canvas的画布输出，然后用你想裁剪成多大的另一个canvas通过putImageData按照对应的画布位置接收然后将这个canvas用toDataURL输出base64的图片然后在把这个base64转化成图片文件就可以进行上传了。2、基础实现文件结构文件我是放在 components 里...
vue3使用canvas实现图层的移动、缩放、旋转等其他编辑操作
不怕麻烦的鹿丸的博客
08-25 2119
一些简单有规则的图形，比如矩形，椭圆，多边形......我们可以使用一些数学函数来计算判断。这种方式非常棒，当你的画布上没有大量的图形时，他可能是非常快的。但是这种方式很难处理那些非常复杂的几何图形。比如说，你正在使用具有二次曲线的线。
vue使用canvas实现移动端手写签名
01-18
基于vue使用canvas实现移动端手写签名！ 之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流 。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。 HTML部分： 请输入您的签名7： Canvas画板</ca
photoEditor:vue 实现对图片的编辑，如画圆、矩形、箭头，涂鸦，文字添加，剪切等功能
05-10
photoEditor vue 实现对图片的编辑，如画圆、矩形、箭头，涂鸦，文字添加，剪切等功能
推荐项目：Vue-Fabric-Editor - 一个创新的前端富文本编辑器
gitblog_00053的博客
03-22 499
推荐项目：Vue-Fabric-Editor - 一个创新的前端富文本编辑器 项目地址:https://gitcode.com/nihaojob/vue-fabric-editor 项目简介 Vue-Fabric-Editor 是一个基于 Vue.js 和 Fabric.js 构建的强大且灵活的富文本编辑器。它将传统的文本输入体验与图形设计元素结合起来，为用户提供了一种全新的内容创作方式。 技术分...
vue 根据选择的图片绘制canvas图片及编辑
lck8989的博客
03-05 8908
工具： cropperjs+vue+canvas methods: { // 画图片方法 drawImage(src) { this.$nextTick(function() { let img = new Image(); // console.log("this.img ...
html5 canvas实现手写签名
10-20
使用html5 canvas标签实现手写 但是效果不是很好 没有笔锋 后续慢慢改进 感谢实现过程中帮助我的人
在vue中使用图片编辑插件ToastUI Image Editor
热门推荐
wyk760629476的专栏
03-16 1万+
简介 ToastUI Image Editor 是一个基于 HTML5 Canvas 的图片编辑器，它使用起来非常简单，而且内置了丰富的图片编辑功能。它支持原生 JavaScript、Vue 组件 和 React 组件三种使用方式。 https://nhn.github.io/tui.image-editor/latest/api 安装 cnpm itui-image-editor --save 引入 import 'tui-image-editor/dist/tui-image-ed...
Vue—使用canvas实现电子签名
weixin_45313351的博客
12-15 2070
实现签名的功能听着很复杂，其实很简单。使用canvas辅助的API和监听鼠标相关事件即可实现。思考：1、如何使用canvas画线？2、如何判断在提交签名时判断是否有签名？3、如何将canvas 转成的base64转成File文件对象传给后端？1.绘制直线ctx.strokeStyle = "#000" // 设置线条颜色ctx.lineWidth = 2 // 设置线条宽度ctx.beginPath() // 开始绘图路径ctx.moveTo(x, y) // 将输入的坐标移动至直线起点。
vue中使用图像编辑器tui-image-editor(一)
weixin_44867717的博客
12-06 3792
图片
Vue利用canvas实现移动端手写板的方法
12-29
本文介绍了Vue利用canvas实现移动端手写板的方法，分享给大家，具体如下： <!--touchstart,touchmove,touchend,touchcancel 这--> <button type= v-on:click=clear>清除</button> <...
基于canvas实现手写签名（vue）
11-20
就自己基于vue写了一个简易的手写签名demo。 其中原理比较简单，先生成一个canvas画布，并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时，我们开始触发canvas里的beginPath事件并且...
一个基于canvas开发,封装于Vue组件的通用手写签名板
05-06
sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;，同时支持重新签名，覆盖签名，下载，保存等
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 378
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 174
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 115
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 254
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue 实现级联选择器功能
清音的博客
04-22 510
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue 实现ps图片编辑_vue项目中实现图片裁剪功能
05-25
Vue是一款非常流行的前端框架，可以很方便地实现图片编辑和裁剪功能。下面，我来介绍一种使用Vue实现图片裁剪的方法。 首先，我们需要引入一个图片裁剪插件。这里我推荐使用Vue-Cropper插件，它是一款基于Cropper....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值