canvas图片裁剪，双指缩放顺滑体验，支持PC端移动端

liukai90 发布于2019-08-21 17:42 / 2378人阅读

摘要：在线演示使用说明请移步使用请参考必填挂载容器宽度限制高度限制图片大小限制被初始化后初始化之前只有调用才会触发建议在这一步显示编辑器通过读取文件之后读取图片前显示编辑器读取图片后保存之前保存之后图片加载并开始渲染读取图片链接读取保存结果，返回

Demo

在线演示

使用说明

API请移步https://github.com/Gitjinfeiy...

使用

请参考demo

 let editor = new ImageEditor(options);

Options

{

container:".wrapper",   //必填 挂载容器
limit:{
    minWidth:50,//宽度限制
    maxWidth:200,
    minHeight:50,//高度限制
    maxHeight:200,
    maxSize:50,//图片大小限制 kb
},
created:function(imageEditor){
  //editor被初始化后
},
beforeReadFile:function(){
 //初始化file之前 只有调用`readFile(file)`才会触发 (建议在这一步显示编辑器)
},
afterReadFile:function(){
      //通过FileReader读取文件之后
    },
beforeLoadImage:function(){
      //读取图片前 (显示编辑器)
    },
afterLoadImage:function(){
      //读取图片后
    },
beforeSave:function(){
      //保存之前
    },
afterSave:function(){
      //保存之后
    },
 afterRender:function(){
  //图片加载并开始渲染
 }

}

API

initImage(url,callback) 读取图片链接

readFile(file) 读取File

save() 保存结果，返回 blob，dataUrl

scaleInCenter(scale) 以canvas中心为中心缩放

rotateZ(deg) 以canvas中心为中心旋转

其他使用请参考demo

GPU云服务器云服务器 html 移动端缩放移动端体验 webrtc支持移动端吗移动端支持webrtc么

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

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

canvas图片裁剪，双指缩放顺滑体验，支持PC端移动端

摘要：在线演示使用说明请移步使用请参考必填挂载容器宽度限制高度限制图片大小限制被初始化后初始化之前只有调用才会触发建议在这一步显示编辑器通过读取文件之后读取图片前显示编辑器读取图片后保存之前保存之后图片加载并开始渲染读取图片链接读取保存结果，返回 Demo 在线演示使用说明 API请移步https://github.com/Gitjinfeiy... 使用请参考demo let edi...

netmou 2019-08-01 18:03 评论0 收藏0
canvas图片裁剪，双指缩放顺滑体验，支持PC端移动端

摘要：在线演示使用说明请移步使用请参考必填挂载容器宽度限制高度限制图片大小限制被初始化后初始化之前只有调用才会触发建议在这一步显示编辑器通过读取文件之后读取图片前显示编辑器读取图片后保存之前保存之后图片加载并开始渲染读取图片链接读取保存结果，返回 Demo 在线演示使用说明 API请移步https://github.com/Gitjinfeiy... 使用请参考demo let edi...

ghnor 2019-08-29 13:50 评论0 收藏0
HTML5中手势原理分析与数学知识的实践

摘要：中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。 HTML5中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能...

rollback 2019-08-20 18:33 评论0 收藏0
匠心打造canvas签名组件

摘要：原文匠心打造签名组件导读月又是项目吃紧的时候，一大波需求袭来，猝不及防。可以先戳这里体验把后面将要提到的签名组件。剩下的也是绑定事件中关键的一步。设置完成了上述功能，一个签名插件就已经成型了。本文首发于CSDN网站，下面的版本又经过进一步的修订。原文：匠心打造canvas签名组件导读 6月又是项目吃紧的时候，一大波需求袭来，猝不及防。度过了漫长而煎熬的6月，是时候总结一波。最近移...

MAX_zuo 2019-08-20 17:53 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0