1.效果图:如下
C#版本
JS 版本
2,C#代码,
const int fourSidedPixels = 134;
/// <summary>
/// 合成四边形图片
/// </summary>
/// <param name="files">图片集合</param>
/// <param name="outPath">输出地址</param>
public static void CreateFourSidedImage(string[] files, string outPath)
{
String[] imageSize = GetXy(files.Length);
int width = GetWidth(files.Length);
if (imageSize.Length == 0)
{
throw new KeyNotFoundException("文件不能为空");// IOException("Not found the images:" + sourcePath);
}
using (Bitmap bitmap = new Bitmap(fourSidedPixels, fourSidedPixels))
{
using (Graphics g = Graphics.FromImage(bitmap))
{
///设置透明背景
g.Clear(Color.Transparent);
for (int i = 0; i < imageSize.Length; i++)
{
String size = imageSize[i];
String[] sizeArr = size.Split(',');
int x = int.Parse(sizeArr[0]);
int y = int.Parse(sizeArr[1]);
using (Bitmap setSmailImage = new Bitmap(files[i]))
{
using (Bitmap newImage = new Bitmap((int)(width), (int)(width)))
{
float w = (float)(width * 0.05);//边框的宽度,可取任意值
using (Graphics gr = Graphics.FromImage(newImage))
{
using (Pen pen = new Pen(Color.White, w)) //加入白色边框
{
gr.DrawImage(setSmailImage, 0, 0, Math.Abs(width), Math.Abs(width)); //先将图片构建好
gr.DrawRectangle(pen, new Rectangle(0, 0, Math.Abs(width), Math.Abs(width)));//加边框
//gr.DrawEllipse(pen, new Rectangle(0, 0, Math.Abs(width), Math.Abs(width))); //加椭圆边框
//setSmailImage.Dispose();
//gr.Dispose();
g.DrawImage(newImage, new Rectangle(x, y, Math.Abs(width), Math.Abs(width)));
}
}
}
}
}
using (Image image = new Bitmap(bitmap))
{
if (File.Exists(outPath))
File.Delete(outPath);
image.Save(outPath, ImageFormat.Png);
}
}
}
}
/// <summary>
/// 计算图片绘制时的XY点
/// </summary>
/// <param name="size"></param>
/// <returns></returns>
public static String[] GetXy(int size)
{
if (size == 0 || size > 9)
{
return null;
}
String[] s = new String[size];
int _x = 0;
int _y = 0;
if (size == 1)
{
_x = _y = 6;
s[0] = "6,6";
}
if (size == 2)
{
_x = _y = 4;
s[0] = "4," + (132 / 2 - 60 / 2);
s[1] = 60 + 2 * _x + "," + (132 / 2 - 60 / 2);
}
if (size == 3)
{
_x = _y = 4;
s[0] = (132 / 2 - 60 / 2) + "," + _y;
s[1] = _x + "," + (60 + 2 * _y);
s[2] = (60 + 2 * _y) + "," + (60 + 2 * _y);
}
if (size == 4)
{
_x = _y = 4;
s[0] = _x + "," + _y;
s[1] = (_x * 2 + 60) + "," + _y;
s[2] = _x + "," + (60 + 2 * _y);
s[3] = (60 + 2 * _y) + "," + (60 + 2 * _y);
}
if (size == 5)
{
_x = _y = 3;
s[0] = (132 - 40 * 2 - _x) / 2 + "," + (132 - 40 * 2 - _y) / 2;
s[1] = ((132 - 40 * 2 - _x) / 2 + 40 + _x) + "," + (132 - 40 * 2 - _y) / 2;
s[2] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[3] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[4] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
}
if (size == 6)
{
_x = _y = 3;
s[0] = _x + "," + ((132 - 40 * 2 - _x) / 2);
s[1] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2);
s[2] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2);
s[3] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[4] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[5] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
}
if (size == 7)
{
_x = _y = 3;
s[0] = (132 - 40) / 2 + "," + _y;
s[1] = _x + "," + (_y * 2 + 40);
s[2] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[3] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[4] = _x + "," + (_y * 3 + 40 * 2);
s[5] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[6] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
if (size == 8)
{
_x = _y = 3;
s[0] = (132 - 80 - _x) / 2 + "," + _y;
s[1] = ((132 - 80 - _x) / 2 + _x + 40) + "," + _y;
s[2] = _x + "," + (_y * 2 + 40);
s[3] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[4] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[5] = _x + "," + (_y * 3 + 40 * 2);
s[6] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[7] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
if (size == 9)
{
_x = _y = 3;
s[0] = _x + "," + _y;
s[1] = _x * 2 + 40 + "," + _y;
s[2] = _x * 3 + 40 * 2 + "," + _y;
s[3] = _x + "," + (_y * 2 + 40);
s[4] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[5] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[6] = _x + "," + (_y * 3 + 40 * 2);
s[7] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[8] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
return s;
}
/// <summary>
/// 计算当个图片的宽度
/// </summary>
/// <param name="size"></param>
/// <returns></returns>
public static int GetWidth(int size)
{
int width = 0;
if (size == 1)
{
width = 120;
}
if (size > 1 && size <= 4)
{
width = 60;
}
if (size >= 5)
{
width = 40;
}
return width;
}
2.1,使用,以及,后期网络图片流方法
static void Main(string[] args)
{
//string imgsrc = "https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEKibbDEP3NvdXT5dB7Xn30oUEicyrEscYnzDwXD8RSUNFzWrqib6myxibF74uhW0cWTeF1EZyN6IdBY5w/132";
//tpl(imgsrc);
//return;
string[] fArr =
{
@"G:\01.jpg",
@"G:\02.JPG",
@"G:\03.jpg",
@"G:\04.jpg",
@"G:\05.jpg",
@"G:\06.jpg",
@"G:\07.jpg",
@"G:\08.jpg",
@"G:\09.jpg"
};
string savaImgPath = $"D:\\g{fArr.Length}.png";
CreateFourSidedImage(fArr, savaImgPath);
Console.ReadKey();
}
#region 读取网络图片流
public static void tpl(string imgsrc)
{
try
{
WebRequest myrequest = WebRequest.Create(imgsrc);//前台js传的path,可以是远程服务器上的,也可以是本地的
WebResponse myresponse = myrequest.GetResponse();
Stream imgstream = myresponse.GetResponseStream();
System.Drawing.Image img = System.Drawing.Image.FromStream(imgstream);
MemoryStream ms = new MemoryStream();
img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
//context.Response.AddHeader("Content-Length", ms.Length.ToString());
//context.Response.Clear();
//context.Response.ContentType = "image/jpeg";
//context.Response.BinaryWrite(ms.ToArray());
//context.Response.OutputStream.Flush();
//context.Response.OutputStream.Close();
using (Bitmap bmp1 = (Bitmap)Image.FromStream(ms))
{
using (Image image = new Bitmap(bmp1))
{
image.Save(@"D:\\g00.png", ImageFormat.Jpeg);
}
}
}
catch (Exception ex)
{
Trace.WriteLine("读取图片异常");
throw ex;
}
}
#endregion
3,JS版本
3.1 由于图片会因为没有加载,所有将图片先用html加载,否则点击第一次没效果,后续才有效果
<html>
<head>
<style>
.imgId img{
width: 50;
height: 50;
}
</style>
</head>
<body>
<div class="imgId" >
<img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"
alt="">
<img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"
alt="">
<img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"
alt="">
<img src="https://newoss.zhulong.com/edu/202004/13/56/164056pnvm5ljknwvqphuv.jpg" alt="">
<img src="https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg"
alt="">
</div>
<a href="javascript:;" class="btn" title=""> 绘制按钮 </a>
<canvas id="myCanvas"></canvas>
</body>
</html>
3.2,JS代码
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var mycars = new Array();
at = document.querySelectorAll(".imgId img")
for (let index = 0; index < at.length; index++) {
mycars.push($(at[index]).attr("src"));
}
// mycars[0] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358353319.jpg";
// mycars[1] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358359926.jpg";
// mycars[2] = "https://www.pic1.jzbl.com/buildingcircle/2d0f0642-0f54-412a-a830-cb0b5828ce90/2020-04-15/i/1586922358354298.jpg";
// mycars[3] = "https://newoss.zhulong.com/edu/202004/13/56/164056pnvm5ljknwvqphuv.jpg";
var fourSidedPixels = 134;
$('.btn').click(function () {
var canvasList = document.getElementById('lineArea');
var canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
canvas.width = fourSidedPixels;
canvas.height = fourSidedPixels;
// 制作透明背景图
ctx.rect(0, 0, fourSidedPixels, fourSidedPixels);
ctx.fillStyle = 'rgba(255, 255, 255, 0)';
ctx.fill();
var cwidth = GetWidth(mycars.length);
console.log(cwidth);
var Xy = GetXy(mycars.length);
for (let index = 0; index < Xy.length; index++) {
var element = Xy[index];
var sizeArr = element.split(',');
var x = Number(sizeArr[0]);
var y = Number(sizeArr[1]);
debugger
let cvs = document.createElement('canvas');
let ct = cvs.getContext('2d');
cvs.width = cwidth;
cvs.height = cwidth;
var ctimg = new Image();
// ctimg.src = cvs.toDataURL("image/png");
//绘制到小图
ct.drawImage(ctimg, 0, 0, cwidth, cwidth);
ctimg.onload = function () {
ct.drawImage(ctimg, 0, 0, cwidth, cwidth);
}
ctimg.src = mycars[index];
// 绘制边框(无效)
// ct.beginPath();
// ct.rect(0, 0, cwidth - 2, cwidth - 2);
// ct.lineWidth = 5;
// // ct.fillStyle = 'white';
// // ct.fill();
// ct.strokeStyle = 'red';
// ct.stroke();
//绘制到大图上
ctx.drawImage(ctimg, x, y, cwidth, cwidth);
}
});
function GetXy(size) {
if (size == 0 || size > 9) {
return null;
}
var s = new Array(size);
// String[] s = new String[size];
var _x = 0;
var _y = 0;
if (size == 1) {
_x = _y = 6;
s[0] = "6,6";
}
if (size == 2) {
_x = _y = 4;
s[0] = "4," + (132 / 2 - 60 / 2);
s[1] = 60 + 2 * _x + "," + (132 / 2 - 60 / 2);
}
if (size == 3) {
_x = _y = 4;
s[0] = (132 / 2 - 60 / 2) + "," + _y;
s[1] = _x + "," + (60 + 2 * _y);
s[2] = (60 + 2 * _y) + "," + (60 + 2 * _y);
}
if (size == 4) {
_x = _y = 4;
s[0] = _x + "," + _y;
s[1] = (_x * 2 + 60) + "," + _y;
s[2] = _x + "," + (60 + 2 * _y);
s[3] = (60 + 2 * _y) + "," + (60 + 2 * _y);
}
if (size == 5) {
_x = _y = 3;
s[0] = (132 - 40 * 2 - _x) / 2 + "," + (132 - 40 * 2 - _y) / 2;
s[1] = ((132 - 40 * 2 - _x) / 2 + 40 + _x) + "," + (132 - 40 * 2 - _y) / 2;
s[2] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[3] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[4] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
}
if (size == 6) {
_x = _y = 3;
s[0] = _x + "," + ((132 - 40 * 2 - _x) / 2);
s[1] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2);
s[2] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2);
s[3] = _x + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[4] = (_x * 2 + 40) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
s[5] = (_x * 3 + 40 * 2) + "," + ((132 - 40 * 2 - _x) / 2 + 40 + _y);
}
if (size == 7) {
_x = _y = 3;
s[0] = (132 - 40) / 2 + "," + _y;
s[1] = _x + "," + (_y * 2 + 40);
s[2] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[3] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[4] = _x + "," + (_y * 3 + 40 * 2);
s[5] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[6] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
if (size == 8) {
_x = _y = 3;
s[0] = (132 - 80 - _x) / 2 + "," + _y;
s[1] = ((132 - 80 - _x) / 2 + _x + 40) + "," + _y;
s[2] = _x + "," + (_y * 2 + 40);
s[3] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[4] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[5] = _x + "," + (_y * 3 + 40 * 2);
s[6] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[7] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
if (size == 9) {
_x = _y = 3;
s[0] = _x + "," + _y;
s[1] = _x * 2 + 40 + "," + _y;
s[2] = _x * 3 + 40 * 2 + "," + _y;
s[3] = _x + "," + (_y * 2 + 40);
s[4] = (_x * 2 + 40) + "," + (_y * 2 + 40);
s[5] = (_x * 3 + 40 * 2) + "," + (_y * 2 + 40);
s[6] = _x + "," + (_y * 3 + 40 * 2);
s[7] = (_x * 2 + 40) + "," + (_y * 3 + 40 * 2);
s[8] = (_x * 3 + 40 * 2) + "," + (_y * 3 + 40 * 2);
}
return s;
}
function GetWidth(size) {
var width = 0;
if (size == 1) {
width = 120;
}
if (size > 1 && size <= 4) {
width = 60;
}
if (size >= 5) {
width = 40;
}
return width;
}
4、总结:
通用的计算方法 GetXy(),和GetWidt();
js版本为实现加边框效果
5、感谢及学习于
https://www.jb51.net/article/165400.htm
zyn010101,他的是java版的