评论

【组件分享】超级简陋的图片剪切上传组件

2019-12-17
2646浏览
3评论

超级简陋但是能用的图片剪切组件ヽ(✿ﾟ▽ﾟ)ノ

在写小活动的时候遇见了一个问题     用户上传的和所需要的图片尺寸总是不一定相等比例的解决起来也很简单，写一个裁截工具让用户裁截就好了

 https://developers.weixin.qq.com/s/bLyRTGmT7Od6    ←代码片段



实现原理：     用户通过 touch 事件以及 slider changing事件来控制，     同时使用 transform这一方便的变换CSS属性来实现视图上的反馈。     然后根据最后的定位参数使用canvas进行裁剪

嗯，肥肠肥肠简陋，不过越简陋越容易被改写成自己用的东西。


ヽ(✿ﾟ▽ﾟ)ノ

点赞 1
收藏
评论

3 个评论

  • 2019-12-21

    谢谢啦!

    我刚发现,图片放大缩小的时候,滑动事件有效,点击事件无效

    ---JS差,这个不知道如何改

    ----------别锤我啊

    截取图片的时候,其实可以用小程序弹窗的原理写,这样arg的值变化时,始终在屏幕的中间,灵活性好些

    ----不知道怎么发你的那种链接

    2019-12-21
    赞同
    回复 1
  • 2019-12-21

    index.wxml里

    arg 的 width 值为什么超过290时,显示的图片内容只是截取的部分内容

    2019-12-21
    赞同
    回复 2
    • 子冥
      子冥
      2019-12-21
      对不起对不起，.window 的尺寸忘记对应改变了


      https://developers.weixin.qq.com/s/ICtDdMml7md1
      这是改过的


      原因大概就是对应 .window 那个截取窗口的大小在CSS里面写死
      290了，那个需要对应改变才对
      2019-12-21
      赞
      回复
    • 2019-12-23回复子冥
      太感谢了！超有耐心
      2019-12-23
      赞
      回复
  • 小肥羊🍊
    小肥羊🍊
    2019-12-17

    学习了，非常感谢分享。

    2019-12-17
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
自定义组件canvas剪切