移动canvas内控件,canvas图形编辑器
项目地址：https://github.com/xiaosu95/canvas_mobile_drag
点击观看演示(在手机上观看)
这个插件是从jq中分离出来的手机图片编辑器。可应用于手机H5页面或微信小程序。
插件的功能是初始化加载页面中的图片，手动添加手机相册中的图片，或者在服务器端添加图片(需要开启服务器端，允许图片跨域)。有多种编辑模式。支持对画布中的所有图片进行操作，并单独设置某一张图片的状态或位置。插件操作模式支持手势放大和旋转；支持点击图片的四个角，拖动，放大或旋转或。支持照片exif自动修正。很多手机拍照方向不同，会造成画面在画布中显示角度不正常。一般的解决方案是引入exif.js，但是js太大了。所以我在这里直接提取exif的角度，大大简化了代码量。插件可以输出你想要的分辨率图片和格式。
开始被使用
var canvasBox=document . query selector( # picBox )；var canvas=new _ canvas({ box:canvas box，//container bgColor: #000 ，//背景色bgPhoto: none ，//背景图像photoModel: adaption ，//加载图片模式(默认模式为设置后添加图片时的当前设置模式)Mode: Cascade /Mode Cascade由添加图片级别的正确添加顺序决定，autoHierarchy为最高级别})创建canvas为canvas对象，调用初始化函数init(Object)
DragEvent、zoomEvent和rotateEvent分别是拖动、缩放和旋转三个事件。传递两个参数(Picarr，target)。Picarr是画布中所有图片对象的数组，target是当前操作的图片对象。回调是‘图片初始化完成’的回调。canvas . init({ drag event:function(Picarr，Target) {//监控拖动事件console.log(当前操作事件：拖动)}、zoomEvent: function (picArr，Target){//监听缩放事件console.log(当前操作事件：缩放)}、rotateevent: function (Picarr，Target){//监听旋转事件console.log(当前操作事件：旋转)}、回调：function () {console.log(图像初始化完成.canvas画布的方法：
toDataURL(Object)
Width:输出的宽度(必选)；Height:输出的高度(必选)；类型：输出图片格式；BgColor:图片的背景色(如果设置了背景图像，则背景图像的层次高于背景色)；Callback:回调函数(传入参数为图片的baes64)。如果没有写回调，toDataURL会返回图片的BAES 64$( output model 2 )。click(function(){ canvas . toda taurl({ width:750，height: 600，type: image/png ，callback: function (url) { $(。output pic’)。attr(src ，URL)；Console.log(成功输出1次png图像)}})addPhoto(Object)
Url:图片url(必选)；模型：加载图片的默认模式是“覆盖”叠加(当它是一个数字时固定宽度，并适应显示)；Enable:是否禁止编辑(Boolean)为false默认情况下；回调：图片加载后的回调，参数是图片的对象；$ (.AddenablePic’)。单击(function(){ canvas . add photo({ URL:。/img/pic6.jpg ，型号：200，enable: true，callback:function(){ console . log(成功添加禁止编辑的图片)}}}
颜色：背景色
照片：背景图像(url)//当背景图像为“无”时删除它
$(.bgColor’)。单击(function(){ var color= # parse int(math . random()* 10)parse int(math . random()* 10)parse int(math . random()* 10)canvas . change BG({ photo:URL，color: color }) })changeBg(Object)
宽度：“画布宽度”，
高度：“画布高度”，
模型：“画布模式”(模式级联是添加的图片级别由添加顺序决定，自动层次级别是选择的图片是最高级别)
changeParams(Object)
返回当前操作的图片对象
getNowPhoto()
空画布
clearCanvas()
照片：画布中的所有图片对象
canvas画布的属性：
Photo对象方法（画布内图片对象）
重置图片大小和位置。
init()
返回图片的位置信息{model，enable，x (x相对于画布)，y (y相对于画布)，rotate，scale，width(图片在画布中的宽度)，height(图片在画布中的高度)，actualWidth(图片的actualHeight
getPhotoInfo()
层次：级别(数字)img:图片URL(字符串)旋转：旋转角度(数字)比例：放大倍数(数字)回调：修改参数后回调(函数)$(。change URL’)。click(function(){ var now photo=canvas . getnophoto()；如果(！NowPhoto) {alert(未选择图片)；返回；} else { var now photo info=now photo . getphotinfo()；Photo.changeinfo ({img:。/img/pic7.jpg ，scale:nowhotoinfo.scale/1.1,层次结构：1，rotate:nohotoinfo . rotate 90，callback:function(){ console . log(修改成功)}}
删图。
这就是本文关于基于canvas的移动图像编辑器的实现。有关canvas移动图像编辑器的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。