pc和移动端图片裁剪插件PhotoClip的踩坑

最新推荐文章于 2021-03-09 18:43:38 发布
原创 最新推荐文章于 2021-03-09 18:43:38 发布 · 3.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#PhotoClip #裁剪

本文记录了使用图片裁剪插件PhotoClip时遇到的坑，包括苹果手机图片自动旋转和安卓手机裁剪图片无法缩放的问题。通过升级iscroll插件到2.X版本成功修复缩放问题，参考链接和相关文件路径已提供。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

遇到的问题有，苹果手机上传的图片会自动旋转，安卓手机上要裁剪图片的无法进行缩放（github上查到原因iscroll插件的bug，替换到2.X版本可修复），已填坑

文章参考https://www.npmjs.com/package/photoclip

文件路径：

http://imagesouth.xxlimageim.com/hammer.min.js
http://imagesouth.xxlimageim.com/iscroll-zoom-min.js

http://imagesouth.xxlimageim.com/lrz.all.bundle.js

http://imagesouth.xxlimageim.com/PhotoClip.js

html部分：

<div class="addCon">
                <di

最低0.47元/天 解锁文章

200万优质内容无限畅学
photoclip / 移动端图片上传剪裁插件 /一款手势驱动的裁图插件
weixin_zsh的博客
09-18 6529
官方网站 https://www.npmjs.com/package/photoclip 介绍 在移动设备上双指捏合为缩放，双指转动为旋转 在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度 兼容 IE10及以上版本，Chrome、Firefox、Safari、Android、微信等主流先进浏览器 依赖插件 iscroll-zoom.jshammer.jslrz.all.bundl...
Jquery图片裁剪插件PhotoClip使用说明
DCFANS的博客
07-22 4020
在Pc端实现图片的裁剪功能，可以使用Jquery图片裁剪插件-------PhotoClip PhotoClip插件描述 该插件可以支持手机端，PC端图片的旋转，缩放，移动等操作。 依赖插件 [jquery.transit.js] 插件 （v1.4 中已经移除了对该插件的依赖） [iscroll-zoom.js] 插件 [hammer.js] 插件 [lrz.all.bundle.js] 插件 ...
基于PhotoClip移动端上传图片裁剪
06-01
移动端上传图片裁剪插件简单版
jQueryphotoClip-图片上传并裁剪
李小暖的前端路
02-25 2624
公司年前要推一个制作新年贺卡的H5活动页，开发过程中踩了几个坑，今天总结分享一下。 最初方案：将用户图片上传服务器，返回url显示在页面上，点击生成贺卡按钮，将url以及贺卡昵称、祝福语传给接口，后台返回一张生成贺卡图片url,显示在页面上，用户可长按保存。 出现的问题：ios多个型号的手机出现拍照或者相册上传的图片会自动旋转90度，用户不可自己选择裁剪区域。 最终方案：使用jQueryph...
photoclip 图片旋转_PhotoClip移动端、pc端上传头像裁剪
weixin_35651471的博客
01-14 168
photoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。一般引入html部分+使用'options' => ["enctype" => "multipart/form-data", 'id' => 'form']]) ?>= $form->field($model, 'image')->hiddenInput()->label(false)...
dede一键同步生成PC和移动端静态HTML插件.zip
06-21
标题中的“dede一键同步生成PC和移动端静态HTML插件”指的是基于织梦内容管理系统（DedeCMS）的一款插件，这款插件的主要功能是帮助用户快速、方便地同步生成适用于个人电脑（PC）和移动设备（如智能手机、平板电脑...
(源码)基于 JavaScript 的移动端照片裁剪插件.zip
最新发布
04-08
PhotoClip.js v3 是一款手势驱动的裁图插件，为移动端照片裁剪提供简洁化解决方案。支持在移动设备上通过双指捏合缩放、双指转动旋转图片，在 PC 设备上使用鼠标滚轮缩放、双击顺时针旋转 90 度。兼容 IE10 及以上...
基于jq-viewer的pc和移动端的图片缩放，托动、旋转等
01-08
【基于jq-viewer的PC和移动端图片操作详解】 在网页开发中，图片的展示和交互是不可或缺的一部分。jq-viewer是基于jQuery库封装的一个高效、轻量级的图片查看器插件，它提供了丰富的功能，如图片的缩放、拖动、旋转...
利用 jQuery-photoClip插件 实现移动端裁剪功能并以Blob对象上传
apple20141201的博客
09-02 282
最近客户要求实现论坛贴子附件裁剪功能，没有考虑js与ios、android容器交互解决方案，单纯用js去实现它的。由于本来附件上传用的别的插件实现的，所以是在此基础上费了不少劲，才把jQuery-photoClip裁剪功能垒上去，但好再最后成功实现了。在实现过程中遇到了几个问题，记下来和大家一起学习研究。 由于安全原因，是不允许js操作文件的。所以jQuery-photoClip裁剪下...
photoclip php,基于PhotoClip移动端上传图片裁剪
weixin_32496175的博客
03-09 383
插件描述：移动端上传图片裁剪插件简单版更新时间：2020-11-16 16:48:02更新说明：解决图片剪裁后默认图片未改变的问题。项目需要移动端页面上传图像并进行裁剪，网上找了许多插件，感觉这个比较简单，功能也强大可以进行拖拽，缩放，旋转。自己做了个简单的demo样式varclipArea=newPhotoClip("#clipArea",{size:[300,300],//裁剪...
前端上传图片可裁剪-photoClip.js-支持移动端.rar
06-05
web和移动端h5都能使用的一款，图片剪切上传插件，亲测可用
photoclip进行图片裁剪上传
02-20
photoclip进行图片裁剪上传，里面有demo页面供大家参考
移动端图片上传截取插件photoClip.js
06-01
支持手势的裁图插件，在移动设备上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度 ，在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度
vue实现移动端图片裁剪上传功能
01-21
本文实例为大家分享了vue移动端图片裁剪上传的具体代码，供大家参考，具体内容如下 1.安装cropperjs依赖库 npm install cropperjs 2.编写组件SimpleCropper.vue <button @click=upload>上传图片</button> <input class=file ref=file type=file accept=image/* @change=uploadChange> <div class
手机端-上传头像并裁剪
weixin_30621959的博客
03-26 212
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>手机移动端上传头像裁剪图片代码</title> <link href="css/style.cs...
photoclip 图片旋转_上传图片可裁剪-photoClip.js-支持移动端
weixin_36137509的博客
01-14 598
1. 引入文件：2. html：截取3. 代码初始化：var clipArea = new bjj.PhotoClip("#clipArea", {size: [300, 300], //截取框的宽和高组成的数组。默认值为[260,260]outputSize: [800, 800], //输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小file: "#fil...
手机端图片上传--支持图片裁剪
叶少翔
11-04 3315
(一)css样式部分         body,html,section {padding:0;margin:0;}    .upload{  /*height: 200px;*/  position: relative; overflow: hidden; }    .upload p{ text-align: center; color: #fff; font-size: 1.1em; mar
完美适配移动端的裁剪图片--jQuery-photoClip
Lamrouge的博客
05-10 1332
通过jQuery-photoClip插件可以实现适配移动端进行裁剪，旋转、缩放等功能。 效果网站：http://www.jylynn.top/photoClip/ 效果： 实现如下： body,html{ font-size: 50px; } .main{ width: 100%; height: 100%; } /* 上传按钮盒子 */ .uploa
自适应PC与移动端的分页插件使用教程
标题中提到的“分页插件，适配PC移动端”，即是指一种可以在个人电脑(PC)和移动设备(移动端)上运行的分页功能实现方式。在网页设计中，分页功能允许用户浏览大量数据时，可以分批次查看，而不是一次性加载全部内容，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值