javascript实现图片代码自由编辑

目前我们的项目中需要一个自由编辑图片的功能。当图片可能需要频繁编辑，而我们发现裁剪不尽如人意，想要微调时，就会发现如果按照常见的习惯处理图片，比如裁剪后上传到服务器，或者转移到base64，都不符合要求。那么应该做得更好的是什么呢？如何用尽可能少的网络请求和更少的存储来解决应用场景？然后，我想到用纯数据来处理我们的函数。

首先，安利是一个裁剪神器，cropperjs，这是一个易于使用的组件库，有完整的配置和api方法。

在项目中介绍，不要错过参考风格

从“cropperjs”导入Cropper导入“cropper js/dist/cropper . CSS”；这里我们以react为例

This.state={width: 640，//图片显示宽度： 360，//图片显示高度imgWidth: 640，//图片实际宽度IMGHEIGHT3360 360，//图片实际高度imgLeft: 0，//图片左偏移量为imgtop : 0 0，//图片偏移量为edit 3360 false//正在编辑}//为了展示图片的基本dom结构，我们使用了img形式Const {width，height，imgwidth，imgheight，imgtop，editing}=this。const containers style={ width : ` $ { width } px `，height : ` $ { height } px ` } const imgStyle={ width : ` $ { imgWidth } px `，height: `${imgHeight}px `，left: `${imgLeft}px `，top: `${imgTop}px`}。img-container {overflow:隐藏；相对位置：}.crop-img {position:绝对值；left : 0；top : 0；} div class name=' img-container ' style={ container style } img class name=' crop-img ' src={ pick } style={ img style } alt=' pic '/img/div简单来说就是外部元素控制剪裁显示的宽度和高度，根据项目要求的元素定位也挂在这里，内部img挂载图片的实际大小和偏移量

cropperjs的初始化元素会和初始化对象img在同一个dom级别，也就是说如果我们直接初始化display img，编辑区的显示会受到父元素的影响，如图，当你放大图片的时候，你将无法看到多余的部分

因此，在这里，为了图片编辑的自由，建议将dom与用于初始化cropper对象的dom分开显示。这里的编辑区是全屏的，根据项目的实际功能区进行调整。edit-container {position:绝对值；left : 0；right : 0；top : 0；bottom : 0；} div类名=' img-container ' style={ container style } img类名=' crop-img ' src={ pick } style={ img style } alt=' pic '/img/div//cropper初始化this . myref=react . create ref()；this . mycropper=new Cropper(this . myref . current，options)；//选项配置const options={ drag mode : ' move '，//剪辑时使图片拖动background:为false，//因为我们现在是全屏可编辑的，所以需要隐藏默认背景}//当然还有很多常见的配置项，比如编辑框大小比例等。您可以自己检查API////剪切并保存save(){ const Cropboxdata=this . mycropper . getcropboxdata()；//获取裁剪框数据const canvasdata=this。mycropper . getcanvasdata()；//获取图片数据这个。setstate({ width : cropbox data . width，height:cropboxdata.height，imgleft : canvasdata . left-cropbox data . left，Img top : canvasdata . top-crowbox data . top，imgwidth:canvasdata.width，imgheight : canvasdata . height })这样，我们就可以在自定义全屏中完全编辑，保存效果如下。这里我们已经完成了第一部分的功能，剪切、保存数据和显示。

主要介绍了两种api方法：getCropBoxData和getCanvasData。getCanvasData用于获取图片的实际数据(当前宽度和高度，以及相对于父元素可视区域的偏移量)，而getCropBoxData用于获取裁剪区域相对于图片区域的相关数据。

然后后续需求来了。第二次编辑的时候怎么恢复效果？嗯，其实我们在记录切割数据的时候，只是重新计算了一下对应的数据关系，在初始化cropper选项中加入了配置。

const options={ drag mode : ' move '，background3360 false，//重置相应的配置read :()={ const { width，height，imgwidth，imgheight，imgtop}=this。国家；//根据实际需要，出现布局裁剪功能进行定位。这里，left和top只定义const left=50作为测试的临时默认值；const top=50this . mycropper . setcanvasdata({ width : IMgwidth，height: imgHeight，left: left，top : top })；this . mycropper . setcropboxdata({ left : left-imgLeft，top: top - imgTop，width: width，height : height })} } this . mycropper=new Cropper(this . myref . current，options)；这时，我们再次点击切割地图，它将被完美还原。左侧与顶部的间隙为setCropBoxData的顶部与左侧，根据实际项目进行调整。SetCropboxdata的左侧和顶部相对于cropper-canvas定位，这样就可以使用上面的计算表单。

至此，基本功可以到此结束。如果在h5编辑中使用，如果设计了比例尺，则在计算相关数据时应包含比例尺的比例尺值，否则显示图片和编辑图片的大小会不相等。同时还有很多功能是不会显示的，比如设置裁剪框的比例，编辑缩放等。欢迎尝试。

当然，如果你想保存图片，到处都有相应的方法把图片的数据剪下来

this . mycropper . getcroppedcanvas()。todaytaurl(' image/JPEG ')

最后我们可以看到，在整个功能过程中，我们所需要的只是剪切数据，读写速度快，不需要额外的图片存储，从而降低了文件服务器的存储开销和优化。

cropperjs github

感谢观看，欢迎讨论指正。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。