图片裁剪（压缩，裁剪图片）

原理：先固定canvas的宽高，把整张图片放到canvas中，这时整张图片就已经同比例缩小了，再获取canvas缩小的图像数据，转成base64 。如果对截取的高度有要求，会从中心位置上下截取要求的高度。

效果图：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport content=" width="device-width, initial-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>Document</title><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head><body><div id="app"><input @change="changeImg" title="" type="file" accept="image/*" id="avatar" /><p>原图片：<img :src="avatarUrl1" alt=""></p><p>裁剪后：<img :src="avatarUrl2" alt=""></p></div><script>var vm = new Vue({el: '#app',data: {avatarUrl1: '',avatarUrl2: ''},methods: {changeImg(e) {const maxWidth = 480 // 自定义截取后图片的宽度const maxHeight = 220 // 自定义截取后图片的高度const avatarFile = document.querySelector('#avatar').files[0]var reader = new FileReader()reader.readAsDataURL(avatarFile)reader.onload = (e) => {const canvas = document.createElement('canvas')const context = canvas.getContext('2d')// 这里的宽高根据自定义的宽高自由调整，意思就是把整张图片放到这个尺寸的canvas里面canvas.width = 500canvas.height = 500var image = new Image()image.src = e.target.resultthis.avatarUrl1 = e.target.resultimage.onload = () => {// 缩小图片宽度到maxWidthconst { width: originWidth, height: originHeight } = imagevar imageWidth = maxWidthvar imageHeight = originHeight * (maxWidth / originWidth)var dx = canvas.width / 2 - imageWidth / 2var dy = canvas.height / 2 - imageHeight / 2context.drawImage(image, dx, dy, imageWidth, imageHeight)var dataImg = context.getImageData(dx, dy, imageWidth, imageHeight)var canvas2 = document.createElement('canvas')var context2 = canvas2.getContext('2d')canvas2.width = imageWidthcanvas2.height = imageHeightcontext2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height)var image1 = new Image()image1.src = canvas2.toDataURL("image/png")image1.onload = () => {// 截取图片的maxHeightconst canvas3 = document.createElement('canvas')const context3 = canvas3.getContext('2d')canvas3.width = image1.widthcanvas3.height = image1.heightcontext3.drawImage(image1, 0, 0, canvas3.width, canvas3.height)var dataImg3 = context3.getImageData(0, canvas3.height / 2 - maxHeight / 2, canvas3.width, maxHeight)var canvas4 = document.createElement('canvas')var context4 = canvas4.getContext('2d')canvas4.width = canvas3.widthcanvas4.height = maxHeightcontext4.putImageData(dataImg3, 0, 0, 0, 0, canvas4.width, maxHeight)this.avatarUrl2 = canvas4.toDataURL("image/png")}}}}}});</script>
</body></html>

图片裁剪（压缩，裁剪图片）相关推荐

Java裁剪压缩PNG图片，透明背景色变黑问题解决
package com.gblfy.test;import java.awt.Graphics2D; import java.awt.Image; import java.awt.Transparen ...
如何使用电脑将图片进行压缩？图片压缩软件怎么操作？
电脑压缩图片的软件怎样操作?我们在进行图片压缩的时候,对于压缩软件的选择及压缩的具体操作过程是很不熟悉的,电脑中的图片需要压缩,也不知道该如何下手,下面将方法分享给大家,一起来看看吧! 操作步骤: 步 ...
java实现图片分辨率压缩、图片软化、jpg质量压缩
最近遇见个需求,需要压缩图片,但是很多涉及到的方法类,要么对jdk依赖比较大,要么对系统的配置有要求,经过几天的研究和测试,终于整了一个还算比较全的方案. 代码注解1:关于根据url读取图片的方法有 ...
【Android 内存优化】图片文件压缩 ( Android 原生 API 提供的图片压缩功能能 | 图片质量压缩 | 图片尺寸压缩 )
文章目录一. 图片压缩二. 图片文件压缩类型三. Android 原生 API 提供的质量压缩四. Android 原生 API 提供的尺寸压缩一. 图片压缩图片压缩 : ① 文件压缩 : ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
imagick php 缩放,php使用imagick模块实现图片缩放、裁剪、压缩示例
PHP 使用Imagick模块缩放,裁剪,压缩图片包括gif图片缩放裁剪代码如下: /** * 图片裁剪 * 裁剪规则: * 1. 高度为空或为零按宽度缩放高度自适应 * 2 ...
takephoto 框架_GitHub - Smecking/TakePhoto: 一款用于在Android设备上获取照片（拍照或从相册、文件中选择）、裁剪图片、压缩图片的开源工具库...
TakePhoto是一款用于在Android设备上获取照片(拍照或从相册.文件中选择).裁剪图片.压缩图片的开源工具库,目前最新版本4.0.2. 3.0以下版本及API说明,详见TakePhoto2. ...
python等比例压缩图片_python(PIL)图像处理(等比例压缩、裁剪压缩) 缩略(水印)图详解...
#coding:utf-8 ''' python图片处理 @author:fc_lamp @blog:http://fc-lamp.blog.163.com/ ''' import Image as ...
图片服务器 imgproxy 入门教程--实现图片实时裁剪/压缩/处理等操作
图片服务器 imgproxy 入门教程--实现图片实时裁剪/压缩/处理等操作入门本指南将向您展示如何使用imgproxy快速调整第一张图像的大小. 安装假设您在计算机上安装了Docker.然后, ...

图片裁剪（压缩，裁剪图片）

图片裁剪（压缩，裁剪图片）相关推荐

最新文章

热门文章