请问前端是否有办法对长图进行切分？求各路大神支招

Question

最近接到了一个很头痛的需求，就是前端这边拿到后端返回的html代码，如：

<div>
    文字
    <img src="xxx.jpg">
    <p>test</p>
    <img src="aaa.jpg">
    文字
<div>

这样的字符串，前端需要对其中所有尺寸超过固定长度的图片进行切分，切成N张等长的图，再缩放到适合手机浏览的尺寸，以同样的形式传给后端：

<div>
    文字
    <img src="xxx1.jpg">
    <img src="xxx2.jpg">
    <img src="xxx3.jpg">
    <p>test</p>
    <img src="aaa1.jpg">
    <img src="aaa2.jpg">
    <img src="aaa3.jpg">
    文字
<div>

说是为了当用户传商品描述和宣传的长图过来以后，在手机端展示时，避免大张的长图加载太慢和图片尺寸不适合手机浏览的问题....（后端是java的，后端的小伙伴说他们那边实现不了，就推给我这个苦逼的前端了...）

真的是毫无思路，也不知道是否有可行性...请问有没有大神有相关的经验呀，或者有没有什么前端之外的处理这种情景的方案~望不吝赐教~万分感谢！！

Answer 1

这个一般都是需要后端处理的。后端处理可以直接在服务器上读取和生成保存图片。

在前端处理也可以，就是用canvas。

创建个canvas元素，设置为最终切分成的图片尺寸。用drawImage()方法剪切图片并缩放到指定尺寸绘制到canvas上。
之后用toDataURL()获取切分后图片数据传到服务器端。

drawImage的参数值

.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）