小程序图片剪裁

qylost 发布于2019-08-23 10:30 / 308人阅读

摘要：基于上面原因，我采用的是里面放置图片，监听上面的手势，通过样式控制图片的旋转缩放和移动，最后剪裁用隐藏的。

一个微信小程序图片剪裁组件，可以通过手势控制旋转缩放移动，也可以点击旋转进行90度旋转，先看下效果（视屏不知道为啥用不了，上个压缩过度的GIF先）：

图片剪裁毫无疑问用的是canvas，但是开发过小程序的同学应该了解小程序canvas的一些坑。比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小、还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃、canvas绘制过大的图片会让小程序变得非常卡顿等等。

　　网上能找到的图片剪裁框架大多采用在canvas上面直接绘制图片，然后通过监听canvas上的用户手势来控制图片移动旋转等，这样截出来的图片会出现模糊的问题，因为canvas的太小了。一种解决方法是，在页面上再放置一个隐藏的canvas大小设为原来的两倍或者再大一点也行用来作为实际剪裁图片的canvas，当然剪裁数据都是从第一个canvas那里来的。但是这样还是有些小问题，就是canvas绘制大的图片会出现卡顿的问题，这种方案在监听用户手势的变化的时候要不停的重新绘制canvas，卡顿变得更加严重，体验非常不好。

　　基于上面原因，我采用的是view里面放置图片，监听view上面的手势，通过css样式控制图片的旋转、缩放和移动，最后剪裁用隐藏的canvas。先看下页面布局：

　　最重要的操作是图片在view中的位置变化如何在canvas中保持一致再剪裁出来，图片相对与view中的左上角坐标、图片的长度和宽度我们都是知道的，还有旋转值通过用户手势变化计算出来，旋转的时候将画布的中心移动到图片的中心点再旋转就行了。

  let ctx = wx.createCanvasContext("imgcrop",this);
  let cropData = _this.data.stv;
  ctx.save();
  // 缩放偏移值
  let x = (_this.data.originImg.width - _this.data.originImg.width * cropData.scale) / 2;
  let y = (_this.data.originImg.height - _this.data.originImg.height * cropData.scale) / 2;

  //画布中点坐标转移到图片中心
  let movex = (cropData.offsetX + x) * 2 + _this.data.originImg.width * cropData.scale;
  let movey = (cropData.offsetY + y) * 2 + _this.data.originImg.height * cropData.scale;
  ctx.translate(movex, movey);
  ctx.rotate(cropData.rotate * Math.PI / 180);
  ctx.translate(-movex, -movey);
  
  ctx.drawImage(_this.data.originImg.url, (cropData.offsetX + x) * 2, (cropData.offsetY + y) * 2, _this.data.originImg.width * 2 * cropData.scale, _this.data.originImg.height * 2 * cropData.scale);
  ctx.restore();

　　查看完整代码请移步到：https://github.com/yuanwyj/Mi...，喜欢的画点个start～～

GPU云服务器云服务器图片剪裁可拖放图片剪裁 php图片压缩与剪裁小程序滚动到图片js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96412.html

实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【思路篇】

摘要：表示不一定是原生形式的数据。接口基于，继承了的功能并将其扩展使其支持用户系统上的文件。读取操作完成的时候，会变成已完成，并触发事件，同时属性将包含一个格式的字符串编码以表示所读取文件的内容。温馨提示：这里除了一些幼稚的小组件啥也没有温馨提示-续：这是一个新的系列，写一些实际开发中遇到的一些常用的功能，想法笨拙，代码乱套写在前面图片上传，作为web端一个常用的功能，在不同的项目中有...

PiscesYE 2019-08-26 11:31 评论0 收藏0
PHP极其强大的图片处理库Grafika详细教程（1）：图像基本处理

摘要：它包含所有的图片处理方法。由于，是基于和库，所以使用方法会根据当前情况，自动选择所需要的图片处理库。这里说明下，如果文字为中文，需要找一个支持中文的字体。默认字体不支持中文，所以你写中文，就是都是小方框。 Grafika是一个PHP图像处理库，是基于Imagick和GD，可以用于改变图片大小，剪裁，比较，添加水印等等功能。还有感知哈希，高级图像过滤，绘制贝塞尔曲线等功能，可谓非常强大。...

fai1017 2019-06-27 14:45 评论0 收藏0
Drawable 使用详解

摘要：启用或停用位图过滤。当位图收缩或拉伸以使其外观平滑时使用过滤。在每个状态变更期间，将从上到下遍历状态列表，并使用第一个与当前状态匹配的项目此选择并非基于最佳匹配，而是选择符合状态最低条件的第一个项目。每个可绘制对象由单一元素内的元素表示。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); ...

JinB 2019-08-19 10:19 评论0 收藏0
本文教你用了python图片剪裁

　　Python语言的表达照片处理使人们常常所使用的层面,那样我们应该怎么实现图片的裁切呢?接下来本文关键为大家介绍了关于用python图片剪裁的资料,原文中根据案例编码推荐的十分详尽,必须的小伙伴可以借鉴一下　　怎么使用python图片剪裁　　以上如图所示，这也是1张包括了各种象棋棋子的照片。我们应该将在其中每个棋盘都裁切出去，这时可以借助python的PIL库成功。　　一、组装PIL库　　假如...

89542767 2023-01-12 13:45 评论0 收藏0
如何使用css来让图片居中不变形微信小程序和web端适用

摘要：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边。如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。图片变形很多人祭奠出了妖魔鬼怪般的各种大法，比如使用jq来写，或者使用css表达式来写。今天我总结的是使用css3来写，唯一最大缺点就是对一些浏览器版本不够兼容。下面就是关于如何使用c...

番茄西红柿 2019-04-23 13:32 评论0 收藏0