单IMG元素的图像拉伸效果

无需任何其他元素辅助，直接一个孤零零的 <img> 标签就可以实现图像的拉伸效果。

优点是不受布局限制，适用场景更广泛，在富文本编辑器中由于只有一个 IMG 元素，因此，无需额外的开发成本，就能保留默认的图片编辑能力。

<script type="module">
    import onlyImgResize from './src/onlyImgResize.js';

    onlyImgResize({
        // 参数在这里
    });
</script>

语法如下：

onlyImgResize(options);

options 为可选参数，包括：

selector

字符串值。默认值是 '.resizable, [resizable]'，表示识别为可拉伸图片的选择器。

maxWidth

数值或布尔值。默认是 true，表示有最大宽度限制，最大宽度值是第一个非内联祖先元素的宽度。支持设置为数值，指定最大宽度值。

whenDisabled

函数值，如果返回 true，表示禁用图像的拉伸，如果是 false，则拉伸执行。默认值是：

function () {
    return window.imgResizable === false || document.imgResizable === false;
}

表示，如果 window.imgResizable 或者 document.imgResizable 的值是 false，则禁用拉伸。

onFinish

函数值，默认是空函数，拖拽结束的时候触发。

此功能从实际项目中剥离，剥离过程可能会有实现上的疏漏，欢迎反馈。

点击图片之后，外面出现的一圈拖拽轮廓是使用 CSS border-image 属性实现的，若对此属性感兴趣，可以参见《CSS新世界》对应章节。

蔡鹏程 / 单IMG元素的图像拉伸效果