Question

我有一张图片，我想把它剪成“＆＃39; n＆＃39;水平件然后想混杂他们。有没有可能的方法使用vanilla JavaScript / CSS而不使用任何图像处理库？我有整个图像的图像网址。

Answer 1

我能想到的方法是使用与css sprites相同的方式

假设你有图像，并为'n'件创建不同的css。

.pieces1 {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

.pieces2 {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

.pieces3 {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}

然后你可以使用

<div class="container"><div class="pieces2"></div><div class="piece3"></div></div>

混淆他们

Answer 2

您可以使用CSS的clip属性执行此操作。

.container, img {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
}
#one, #two, #three, #four {
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url(http://s25.postimg.org/urlomcl1r/0_street_views_arden_street_2006_barry_nelson.jpg);
  background-size: 200px 200px;
  clip: rect(0px, 200px, 50px, 0px);
  transform: translate(0px, 50px);
}
#two {
  clip: rect(50px, 200px, 100px, 0px);
  transform: translate(0px, 100px);
}
#three {
  clip: rect(100px, 200px, 150px, 0px);
  transform: translate(0px, -100px);
}
#four {
  clip: rect(150px, 200px, 200px, 0px);
  transform: translate(0px, -50px);
}

<div class="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
</div>

<img src="http://s25.postimg.org/urlomcl1r/0_street_views_arden_street_2006_barry_nelson.jpg" />

Answer 3

是。您可以在Canvas中加载图像，剪切并重新组合。

使用Canvas drawImage方法剪切图像。

drawImage（）Canvas方法用于直接在图像数据上显示画布。

它采取的形式; drawImage（Image，sx，sy，sw，sh，dx，dy，dw，dh）

其中;

Image =已在画布上加载的图片。
sx - 在要复制的矩形的x轴上的起始位置。
sy - 要复制的矩形的y轴上的起始位置。
sw - 从sx开始的矩形宽度。
sh - 从sy。
dx - 切割三角形将转移到的X轴位置。
dy - 切割三角形将转移到的X轴位置。
dw - 目的地切割图像的宽度。
dh - 目的地切割图像的高度。

所以drawImage（图片，0,0,100,200,200,200,50,100）意味着

从位置0,0开始剪切一个Image矩形。矩形应为100px宽，200px高。将切割矩形从顶部放置200px，将200px放置在右侧。将切割矩形的大小减小到50px宽和100px高。

请参阅http://www.homeandlearn.co.uk/JS/html5_canvas_draw_scale_slice.html

使用JS切片和混淆图像

3 个答案: