图片编辑器开发实践

最新推荐文章于 2024-07-13 13:41:23 发布

「已注销」

最新推荐文章于 2024-07-13 13:41:23 发布

阅读量873

点赞数 19

文章标签：编辑器

本文链接：https://blog.csdn.net/weixin_44878044/article/details/136188952

版权

theme: cyanosis

TNTWeb - 全称腾讯新闻中台前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能业务提效和产品创新。

团队倡导开源共建，拥有各种技术大牛，团队Github地址：https://github.com/tnfe

本文作者口袋

图片编辑器开发总结

背景：

在实际业务开发中遇到图片编辑模块，实际上图片编辑本身是相对于业务比较解藕的模块。对于使用方需要提供原图加载接口和编辑后导出文件接口即可！

因此想到可以做提取一个功能完备，减少使用者配置的图片编辑器组件，方便后续各业务使用。虽然市面上其实已经有一些使用起来还不错的的组件。图片编辑组件的开发主要是基于一下两个方面来考虑：

1，需要能够满足常见的图片编辑需求，扩展更多的功能等

2，需要做到良好的交互

和任何其他组件或者模块开发一样，首先是先调研目前市面上已有的图片编辑器；经过比较最终选择了https://github.com/nhn/tui.image-editor，它的优点很明显就是api较多支持的功能较多，但是缺点也很明显，就是很古老，react的支持在2021年的2月份才支持，并且不支持hooks. 于是我们就在此基础上采用ts+react hooks 来编写我们的自己的编辑器。如果你不经常使用canvas，很多api都需要去查找，笔者也是这样，一边看源码，一边看canvas的api，下面是实现基本原理包括canvas的常用方法总结，编辑器实战以及未来想实现的一些功能。

实现基本原理 canvas大法

在开始之前，我们先说下canvas的注意事项：

标签不可省

与很多html标签不一样的是元素需要结束标签()，你不可以直接这样写

你的所有操作都是在渲染上下文中

元素创造了一个固定大小的画布，canvas起初是空白的，我们通过其渲染上下文可以用来绘制和处理要展示的内容。

图片编辑器的总体步骤是：第一步是设置画布并获取渲染上下文，第二步：我们需要将图片绘制在canvas画布上，第三步是做各种操作；

第一步：设置画布并获取渲染上下文：

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

「已注销」

关注

19
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
图片编辑器开发实践

在实际业务开发中遇到图片编辑模块，实际上图片编辑本身是相对于业务比较解藕的模块。对于使用方需要提供原图加载接口和编辑后导出文件接口即可！因此想到可以做提取一个功能完备，减少使用者配置的图片编辑器组件，方便后续各业务使用。虽然市面上其实已经有一些使用起来还不错的的组件。图片编辑组件的开发主要是基于一下两个方面来考虑：1，需要能够满足常见的图片编辑需求，扩展更多的功能等2，需要做到良好的交互和任何其他组件或者模块开发一样，首先是先调研目前市面上已有的图片编辑器；经过比较最终选择了。
复制链接

扫一扫