Vue实现用户自定义上传头像裁剪
使用技术:
vue.js2.0、cropperjs、canvas
<template> <div id= "app" > <div id= "demo" > <!-- 遮罩层 --> <div class= "container" v-show= "panel" > <div> <img id= "image" :src= "url" alt= "Picture" > </div> <button type= "button" id= "button" @click= "crop" >确定</button> </div> <div style= "padding:20px;" > <div class= "show" > <div class= "picture" :style= "'backgroundImage:url('+headerImage+')'" > </div> </div> <div style= "margin-top:20px;" > <input type= "file" id= "change" accept= "image" @change= "change" > <label for = "change" ></label> </div> </div> </div> </div> </template> <script> import Cropper from 'cropperjs' export default { components: { }, data () { return { headerImage: '' , picValue: '' , cropper: '' , croppable: false , panel: false , url: '' } }, mounted () { //初始化这个裁剪框 var self = this ; var image = document.getElementById( 'image' ); this .cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, background: false , zoomable: false , ready: function () { self.croppable = true ; } }); }, methods: { getObjectURL (file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; }, change (e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return ; this .panel = true ; this .picValue = files[0]; this .url = this .getObjectURL( this .picValue); //每次替换图片要重新得到新的url if ( this .cropper){ this .cropper.replace( this .url); } this .panel = true ; }, crop () { this .panel = false ; var croppedCanvas; var roundedCanvas; if (! this .croppable) { return ; } // Crop croppedCanvas = this .cropper.getCroppedCanvas(); console.log( this .cropper) // Round roundedCanvas = this .getRoundedCanvas(croppedCanvas); this .headerImage = roundedCanvas.toDataURL(); this .postImg() }, getRoundedCanvas (sourceCanvas) { var canvas = document.createElement( 'canvas' ); var context = canvas.getContext( '2d' ); var width = sourceCanvas.width; var height = sourceCanvas.height; canvas.width = width; canvas.height = height; context.imageSmoothingEnabled = true ; context.drawImage(sourceCanvas, 0, 0, width, height); context.globalCompositeOperation = 'destination-in' ; context.beginPath(); context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true ); context.fill(); return canvas; }, postImg () { //这边写图片的上传 } } } </script> <style> *{ margin: 0; padding: 0; } #demo #button { position: absolute; right: 10px; top: 10px; width: 80px; height: 40px; border:none; border-radius: 5px; background:white; } #demo .show { width: 100px; height: 100px; overflow: hidden; position: relative; border-radius: 50%; border: 1px solid #d5d5d5; } #demo .picture { width: 100%; height: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; } #demo .container { z-index: 99; position: fixed; padding-top: 60px; left: 0; top: 0; right: 0; bottom: 0; background:rgba(0,0,0,1); } #demo #image { max-width: 100%; } .cropper-view-box,.cropper-face { border-radius: 50%; } /*! * Cropper.js v1.0.0-rc * * Copyright (c) 2017 Fengyuan Chen * Released under the MIT license * * Date: 2017-03-25T12:02:21.062Z */ .cropper-container { font-size: 0; line-height: 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; direction: ltr; -ms-touch-action: none; touch-action: none } .cropper-container img { /* Avoid margin top issue (Occur only when margin-top <= -height) */ display: block; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; width: 100%; height: 100%; image-orientation: 0deg } .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .cropper-wrap-box { overflow: hidden; } .cropper-drag-box { opacity: 0;
|
深圳半价门票、半价美食,关注【深圳摩天轮】公众号,各种福利资源,交友活动,摩天轮特价票