js 自由变换图片尺寸

xiaoxiao2021-02-28  89

自由变换工具类似于PS中Ctrl+T功能,实现图片的缩放、斜切、旋转和位移。本实例已兼容不同容器的自由变换:一种是canvas,另一种是div。

canvas容器格式:仅支持<img>标签,控制点的渲染由canvas完成。

 

<body> <canvas id="stage" width="640" height="480"> <img /> </canvas> </body>

 

div容器格式:兼容支持<img>标签和<div>标签,其中的<svg>用于控制点的渲染。

 

 

<body> <div id="stage"> <img /> <div>大家好,我是自由变换工具</div> <svg id="svg-tool"></svg> </div> </body>

(注)div作为容器实现自由变换,必须要有一个svg标签。

 

资源变换效果如下:

实例中已详细做了注释,详细源码可下载附件。

http://download.csdn.net/detail/zeping891103/9863744

转载请注明原文地址: https://www.6miu.com/read-51935.html

最新回复(0)