演示地址
前言
使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能
使用cropperjs插件
安装cropperjs
yarn install cropperjs
初始化一个canvas元素,并在上面绘制图片
// 在canvas上绘制图片
drawImg () {
this.$nextTick(() => {
// 获取canvas节点
let canvas = document.getElementById(this.data.src)
if (canvas) {
// 设置canvas的宽为canvas的父元素宽度,宽高比3:2
let parentEle = canvas.parentElement
canvas.width = parentEle.offsetWidth
canvas.height = 2 * parentEle.offsetWidth / 3
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.data.src
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)