u013034014
YuuyaRin
采纳率100%
2019-05-27 21:04 阅读 506

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

40

最近接到了一个很头痛的需求,就是前端这边拿到后端返回的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的,后端的小伙伴说他们那边实现不了,就推给我这个苦逼的前端了...)

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • 已采纳
    jslang 天际的海浪 2019-05-28 04:14

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

    在前端处理也可以,就是用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 可选。要使用的图像的高度。(伸展或缩小图像)

    点赞 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2019-05-27 23:30
  • qq_36022290 zhenyu-s5 2019-05-28 08:56

    由于我刚刚我回答你问题直接发外部的链接,给我封了,所以给你发截图吧,你直接自己输入网址搜索吧
    图片说明
    图片说明

    点赞 评论 复制链接分享
  • dsxjinzhiqiang dsxjinzhiqiang 2019-05-28 09:21

    有点麻烦了,你们如果有Android的话,可以直接让Android用webview这个控件加载那张大图,当然具体的看你们的需求,webview.loadUrl("图片地址");

    点赞 评论 复制链接分享
  • lllomh lllomh 2019-05-28 14:28

    你好,是可以进行裁剪的,有相关方法,希望采纳

    点赞 评论 复制链接分享

相关推荐