如何在php中使用一块图像绘制形状 [英] How to draw a shape using a piece of image in php
问题描述
我需要使用一张图片来创建框架图片。
例如：
用户将从后端上传图片：
现在我需要根据前端用户的要求在前端创建一个框架（用户将选择框架的高度和宽度，然后他会选择这个图像块），像这样：
我没有办法这样，我试图通过css和html画布，但没有运气。
可以有人请建议我如何使用PHP或CSS或HTML或JavaScript或任何方式。
您可以在这里看到实际上需要做的工作示例。
...并裁剪和拉紧以使其清洁像这样（边缘周围没有空白，缺口/切除）：
$
注意：我在这里不使用javascript。它将用于动态设置元素大小，如html中所示。
通常我会使用明智的数额：before 和'：after'伪元素来保持html不那么混乱，但是因为你需要动态框架大小，所以我们需要使用一些嵌套的div元素来设置动态样式的宽度和高度是关键到一些 div 元素（如果javascript可以访问这些元素，或者如果不需要动态调整大小，其中一些仍然是伪元素）。
注意：到目前为止，我只在Chrome和Firefox中测试过。
/ * framing * / .frameit {/ * width和height必须由javascript动态设置html * / position：relative; box-sizing：border-box; overflow：hidden; padding：20px; / *至少边框大小* /} .frameit：before，.frameit：after，.frameit .sides> div，.frameit .corner> div {position：absolute; background-image：url（http://i.stack.imgur.com/vAgqj.jpg）; background-size：100％20px; / * 100％和border size * / height：20px; / *等于frameit div的边框宽度* /} .frameit：before {content：''; top：0;左：0; right：0; } .frameit：after {content：''; bottom：0;左：0; right：0; } .frameit .sides {position：absolute; top：0; right：0; bottom：0;左：0; z-index：1; } .frameit .sides> div {/ * width必须由javascript动态设置html * / height：20px; } .frameit .sides> div：first-child {top：0; left：20px; / * border width * / transform-origin：0 0; transform：rotate（90deg）; } .frameit .sides> div：last-child {bottom：0; right：20px; / * border width * / transform-origin：100％100％; transform：rotate（90deg）; } .frameit .sides〜.corner {/ * all corners * / position：absolute; z-index：2; width：29px; / *（（border-width squared）x 2的平方根）向上舍入* / height：29px; / * match width * / overflow：hidden; } .frameit .TL {top：0;左：0; transform-origin：0 0; transform：rotate（-45deg）; } .frameit .TL> div {top：inherit; left：inherit; transform-origin：inherit; transform：rotate（45deg）; } .frameit .TR {top：0; right：0; transform-origin：100％0; transform：rotate（45deg）; } .frameit .TR> div {top：0; right：0; transform-origin：100％0; transform：rotate（-45deg）; } .frameit .BR {bottom：0; right：0;转化来源：100％100％; transform：rotate（-45deg）; } .frameit .BR> div {bottom：inherit;右：继承transform-origin：inherit; transform：rotate（45deg）; } .frameit .BL {bottom：0;左：0;转化原点：0 100％; transform：rotate（45deg）; } .frameit .BL> div {bottom：inherit; left：inherit; transform-origin：inherit; transform：rotate（-45deg）; } / *可选的阴影以帮助定义联合* / .frameit .sides> div：first-child：before，.frameit .sides> div：last-child：before {content：''; position：absolute; top：0; right：0;左：0; bottom：0; background-color：rgba（0,0,0，.07）; }
< div class =frameitstyle = width：200px; height：300px;> <！ - 顶部和底部以及假定由javacript由用户设置的整体容器宽度和高度 - > < div class =sides> <！ - 孩子的左侧和右侧宽度等于容器的HEIGHT，并且假设由用户通过javacript设置 - > < div style =width：300px;>< / div> < div style =width：300px;>< / div> < / div> < div class =TL corner><！ - top left bevel - >< div style =width：200px;>< / div>< / div& < div class =TR corner><！ - top right bevel - >< div style =width：200px;>< / div>< / div> < div class =BR corner><！ - bottom right bevel - >< div style =width：200px;>< / div>< / div> < div class =BL corner><！ - bottom left bevel - >< div style =width：200px;>< / div>< / div>< / div ;
I need to create a frame image by using a piece of an image.
For Example:
User will upload a image piece from back-end:
Now I need to create a frame on front-end as per the front-end user's requirement (user will choose the height and width of frame then he will choose this image piece) like this:
I am not getting any way to do this, I have tried to do this by css and html canvas but no luck.
Can some one please suggest me how can I achieve this by using PHP or CSS or HTML or JavaScript or any how.
You can see the working example here, that actually I need to do.
Preprocessing the image is vital
Whether done manually by you, or on the fly somehow through a GD library, you absolutely at the least need to take the image you state you are receiving...
...and crop and tighten it to make it clean like this (with no white space around the edges and the notch/cut removed):
Then you have an image you can actually work with.
Otherwise, PURE CSS / JAVASCRIPT
NOTE: I am not doing the javascript here. It would be used to dynamically set the element sizing as seen in the html.
Normally I would use a judicious amount of :before and ':after' pseudo elements to keep the html less cluttered, but since you need dynamic sizing of the frame, then we need to use a number of nested div elements to set dynamic styles for widths and heights that are critical to some of the div elements (some of which would still be pseudo elements if javascript could access those or if dynamic sizing was not needed).
NOTE: So far I have only tested this in Chrome and Firefox. Really old browsers are for sure going to fail miserably.
/* implementation of framing */
.frameit {
/* width and height must be set dynamically by javascript see html */
position: relative;
box-sizing: border-box;
overflow: hidden;
padding: 20px; /* at least border size */
}
.frameit:before,
.frameit:after,
.frameit .sides > div,
.frameit .corner > div {
position: absolute;
background-image: url(http://i.stack.imgur.com/vAgqj.jpg);
background-size: 100% 20px; /* 100% and border size */
height: 20px; /* equal to border width of frameit div */
}
.frameit:before {
content: '';
top: 0;
left: 0;
right: 0;
}
.frameit:after {
content: '';
bottom: 0;
left: 0;
right: 0;
}
.frameit .sides {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.frameit .sides > div {
/* width must be set dynamically by javascript see html */
height: 20px;
}
.frameit .sides > div:first-child {
top: 0;
left: 20px; /* border width */
transform-origin: 0 0;
transform: rotate(90deg);
}
.frameit .sides > div:last-child {
bottom: 0;
right: 20px; /* border width */
transform-origin: 100% 100%;
transform: rotate(90deg);
}
.frameit .sides ~ .corner { /* all corners */
position: absolute;
z-index: 2;
width: 29px; /* square root of ((border-width squared) x 2) round up */
height: 29px; /* match width */
overflow: hidden;
}
.frameit .TL {
top: 0;
left: 0;
transform-origin: 0 0;
transform: rotate(-45deg);
}
.frameit .TL > div {
top: inherit;
left: inherit;
transform-origin: inherit;
transform: rotate(45deg);
}
.frameit .TR {
top: 0;
right: 0;
transform-origin: 100% 0;
transform: rotate(45deg);
}
.frameit .TR > div {
top: 0;
right: 0;
transform-origin: 100% 0;
transform: rotate(-45deg);
}
.frameit .BR {
bottom: 0;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-45deg);
}
.frameit .BR > div {
bottom: inherit;
right: inherit;
transform-origin: inherit;
transform: rotate(45deg);
}
.frameit .BL {
bottom: 0;
left: 0;
transform-origin: 0 100%;
transform: rotate(45deg);
}
.frameit .BL > div {
bottom: inherit;
left: inherit;
transform-origin: inherit;
transform: rotate(-45deg);
}
/* Optional shading to help define the joint */
.frameit .sides > div:first-child:before,
.frameit .sides > div:last-child:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0,0,0,.07);
}
<div class="frameit" style="width: 200px; height: 300px;">
<!-- top and bottom and overall container
width and height assumed to be set by javacript by user
-->
<div class="sides">
<!-- left and right sides
widths of the children are equal to HEIGHT of container and are
assumed to be set by javacript by user
-->
<div style="width: 300px;"></div>
<div style="width: 300px;"></div>
</div>
<div class="TL corner"><!-- top left bevel --><div style="width: 200px;"></div></div>
<div class="TR corner"><!-- top right bevel --><div style="width: 200px;"></div></div>
<div class="BR corner"><!-- bottom right bevel --><div style="width: 200px;"></div></div>
<div class="BL corner"><!-- bottom left bevel --><div style="width: 200px;"></div></div>
</div>
这篇关于如何在php中使用一块图像绘制形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
