前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》,这次公司要做个与奥运相关的活动,扫车牌赢奖。 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用。下图是活动中裁剪的页面: 先来看看两个活动的不同: 1、原先的活动每次旋转只能90°,而此次 ...
前言 如今的H 运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜 加贴纸 评颜值之类的。尤其是一些拍照软件公司的运营活动几乎全部都是这样的。 博主也做过不少,为了省事就封装了一个简单的图片拖拽 裁剪的插件。其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery。索性自己搞一个轻量的,只是不支持缩放功能。 DEMO 手机上看效果比较好,PC上没有兼容处理 ,原 ...
2016-11-17 20:39 7 12830 推荐指数:
前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》,这次公司要做个与奥运相关的活动,扫车牌赢奖。 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用。下图是活动中裁剪的页面: 先来看看两个活动的不同: 1、原先的活动每次旋转只能90°,而此次 ...
今天利用canvas 实现了图片的裁剪。具体代码看下面。 html: <div class="img-add imgadd video-add"> src="images/iconfont-tianjia.png" alt="" width="100 ...
原生代码:https://github.com/helloCaijiaqi/music_player_js/tree/master/music_player_js vuejs封装的播放器组件: https://github.com/helloCaijiaqi/music_player_vuejs ...
前面曾经写过一篇《H5图片裁剪升级版》,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中。 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计算。veImage的源码可以在此处浏览。 一、原理 1)拖动、缩放、裁剪都是借助Canvas实现 ...
js插件---图片裁剪photoClip 一、总结 一句话总结:页面裁剪图片得到base64格式的图片数据,然后把这个数据通过ajax上传给服务器,服务器将base64图片数据解析成图片并且保存到服务器上面,并且返回图片在服务器上的地址。 二、图片裁剪photoClip ...
开源JS图片裁剪插件 一、总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二、5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)(转) 转自:5款 ...
参考地址: 1、https://www.jianshu.com/p/b252a7cbcf0b 2、https://blog.csdn.net/weixin_38023551/article ...
基于zepto,支持多文件上传,进度和图片预览,用于手机端。 $self.css('position', 'relative'); $self.append('<input id="fileImage" style ...